Vous êtes sur la page 1sur 24

P R OJ E TT E CH NOL OGI E SWE B

P R O G R A MMA T I O NE NT E MP S R E L A D A-

R A L I S P A R

I CH I OU I A Y OU B MA H I D I H A J A R Z E R H OU N I S A D

Technologie Web

ENSA Kenitra 2013

Cest avec plaisir quon adresse nos remerciements aux personnes qui ont Contribu la ralisation de ce projet qui nous a apport une exprience enrichissante et en particulier, notre encadrant Mr. AbouAbdallah pour ses conseils ainsi que pour sa disponibilit.

Technologie Web

ENSA Kenitra 2013

SOMMAIRE
Prsentation de la thmatique................................................................................................................ 3 Prsentation de la programmation temps relle ............................................................................. 4 Les langages pour la programmation temps rel ............................................................................. 4 ADA : langage de programmation ....................................................................................................... 4 Ada aujourd'hui ................................................................................................................................... 5 LADA et les temps rel ....................................................................................................................... 5 Limpact du projet ............................................................................................................................... 7 Le Site Web .............................................................................................................................................. 8 Forme et Design .................................................................................................................................. 9 Mise en place de la forme ................................................................................................................. 10 Amlior lattractivit visuel du site web .......................................................................................... 12 Partir plus loin ....................................................................................................................................... 15 Hbergement :................................................................................................................................... 16 Rfrencement : ................................................................................................................................ 18 Ides pour rendre le site dynamique ................................................................................................ 20 Webographie ......................................................................................................................................... 22

Technologie Web

ENSA Kenitra 2013

Prsentation de la thmatique

Technologie Web

ENSA Kenitra 2013

Prsentation de la programmation temps relle


Les systmes informatiques temps rel se diffrencient des autres systmes informatiques par la prise en compte de contraintes temporelles dont le respect est aussi important que l'exactitude du rsultat, autrement dit le systme ne doit pas simplement dlivrer des rsultats exacts, il doit les dlivrer dans des dlais imposs. Les systmes informatiques temps rel sont aujourd'hui prsents dans de nombreux secteurs d'activits : dans l'industrie de production par exemple ; au travers des systmes de contrle de procd (usines, centrales nuclaires) ; dans les salles de march au travers du traitement des donnes boursires en " temps rel " ; dans l'aronautique au travers des systmes de pilotage embarqus (avions, satellites), ou encore dans le secteur de la nouvelle conomie au travers du besoin, toujours croissant , du traitement et de l'acheminement de l'information (vido, donnes, pilotage distance, ralit virtuelle, etc.). Le dveloppement de systmes temps rel ncessite donc que chacun des lments du systme soit lui-mme temps rel, cest--dire permette de prendre en compte des contraintes temporelles. Un systme d'exploitation conu de cette manire est appel systme d'exploitation temps rel.

Les langages pour la programmation temps rel


Trois sortes de langages peuvent tre identifies dans le contexte du dveloppement d'applications temps rel les langages assembleurs les langages squentiels lis des librairies systme les langages concurrents de haut niveau

ADA : langage de programmation


Ada est un langage de programmation qui reprsente l'aboutissement de la ligne des langages "classiques", impratifs et procduraux. Il constitue essentiellement un effort de synthse des meilleurs lments figurant dans les langages qui l'ont prcd, intgrs dans un ensemble cohrent. Ada a t conue d'aprs un cahier des charges, dont l'ide directrice est de diminuer le cot des logiciels, en tenant compte de tous les aspects du cycle de vie. Il a t utilis avec succs dans des domaines aussi varis que le temps-rel, la gestion, la CAO, le traitement linguistique... Ada est une norme internationale. Tous les compilateurs actuellement sur le march ont t valids selon une procdure extrmement rigoureuse qui assure leur conformit la norme. Aucun surensemble ni sous-ensemble n'est admis, afin de garantir la portabilit des applications. Des tudes conomiques ont montr que les projets en Ada cotaient moins cher en dveloppement, que leur phase d'intgration tait plus courte, et qu'il restait moins d'erreurs rsiduelles que dans des projets quivalents dvelopps dans d'autres langages. Passer Ada est avant tout une dcision justifie sur le plan conomique comme sur celui de la scurit.
4

Technologie Web

ENSA Kenitra 2013

Ada aujourd'hui
Ada est parmi les langages les plus avanc des langages orients objet Ada 2012 est un vritable langage industriel qui conserve les avantages des versions prcdentes tout en offrant un support aux besoins d'aujourd'hui : hritage, interfaces, paralllisme, excution distribue, compatibilit avec les bibliothques et les standards du march. Vous utilisez Ada tous les jours... Que ce soit pour vos loisirs (Canal+, systme HERTZ-Neverlost), vos dplacements (TGV, avion, mtro), votre scurit (contrle arien, scurit ferroviaire), vous utilisez tous les jours des logiciels crits en Ada. Sans compter les nombreux projets industriels et militaires qui en font grand usage. Exemple classique en ADA Bonjour monde ! Il est prsent temps d'crire notre premier programme Ada. Tradition oblige, nous allons commencer par crire un exemple de Bonjour monde . Ouvrez un diteur de texte et saisissez les lignes suivantes : 1. 2. 3. 4. 5. 6. with text_io; use text_io; procedure bonjour_monde is begin put("Bonjour monde !"); end bonjour_monde;

*L'instruction with en Ada indique que nous aurons besoin du paquetage nomm, dans ce cas text_io. *Le paquetage text_io permet les fonctions procdures d'E/S. *procedure : dclare que nous crivons une nouvelle procdure avec le nom bonjour_monde. *L'instruction is nous indique que nous allons dmarrons la section dclarative de la procdure *put : Cette commande appelle la procdure put partir du paquetage text_io pour afficher le message Bonjour monde ! l'cran.

LADA et les temps rel


Dans la conception initiale du langage de programmation Ada, une exigence a t incluse qu'il est capable de fonctionner dans un environnement temps rel. Il faut pour cela que nous avons un certain contrle du temps. Nous avons au moins besoin de pouvoir lire l'heure et de savoir quand nous arrivons un moment donn. L'exemple de programme quon a mis sur le site web nous illustre comment nous pouvons le faire.

Technologie Web

ENSA Kenitra 2013

Le programme dbute notre manire habituelle, sauf pour l'ajout d un nouveau paquet, il sagit du paquet Ada.Calendar qui doit tre fournie avec le compilateur. Le paquet spcification pour. Ce packet nous donne la possibilit de lire l'heure et la date systme et nous permet de mettre en place un dlai chronomtr. La fonction CLOCK Le type TIME dans ADA est priv, de sorte quon ne pzut pas voir la faon dont il est mis en uvre, mais on na pas besoin de le voir. Un appel la Fonction horloge retourne l'heure courante et la date une variable de type TIME, et d'autres fonctions sont prvues pour obtenir les lments individuels de la date ou le nombre de secondes coules depuis minuit (par exemple). Mais on ne peut pas lire les lments individuels directement, car certains peuvent changer entre les lectures subsquentes menant des donnes errones. Une procdure nomme Split est prvu pour diviser la variable de type TIME et retourner tous les quatre champs la fois, et une autre procdure nomm Time_Of qui combinera les diffrents lments dans une variable de type TIME quand on lui attributs les quatre lments comme des entres. Le Delay Faire un retard Delay est un mot rserv et utilis pour indiquer l'ordinateur quon souhaite inclure un retard un certain moment dans le programme. Le dlai est exprim en secondes, et est dclare comme un nombre virgule fixe, qui est dfinie par chaque implmentation. La valeur du retard est en gnral de type DAY_DURATION, sauf pour quelque cas ou on peut changer ce type et dun intervalle entre 0,0 86,400.0, qui est le nombre de secondes dans une journe, et elle doit permettre un delta de pas plus de 20 millisecondes. Un point rajouter cest que Delay ne fait pas partie du paquet ADA.calendar Les tches dans ADA Une tche Ada est compose d'une spcification de tche et dun corps de la tche et les deux parties commencent par le mot rserv Task. La structure d'une tche est trs similaire la structure d'un sous-programme ou de l'emballage. Ce premier exemple est une tche trs simple qui excute une boucle for contenant des instructions de sortie. Le rsultat final se compose de quatre lignes de texte est affich sur l'cran. procedure tache1 is task tache_1; task body tache_1 is begin for Index in 1..4 loop Put("La boucle de for s'est excecute"); Put(Index, 3); Put(" fois"); New_Line; end loop; end tache_1;

Technologie Web

ENSA Kenitra 2013

Ordre d'excution n'est pas dfini par l'ADA Quelle tche sera choisie comme la prochaine tche n'est pas dfinie par ADA, de sorte que toute tche peut tre la suivante sexcuter, y compris celle qui est actuellement en cours d'excution. Le rsultat final est que tous les tches, y compris celle de la partie excutable du bloc, peut tre excute selon un system premptif Tourniquet. Donc cest lordonnanceur de choisir quelle sera la tache suivante.

Limpact du projet
Le projet de la cration dun site statique est une occasion pour appliquer le thorique quon a appris lors de nos cours lENSAK et laide de lautoformation. Et grce ce projet on a pu appliquer plusieurs technique dHTML, CSS et JavaScript, et surtout dagir sur linteraction entre eux pour une belle prsentation de site. Cette exprience nous a permis de : acqurir des techniques dorganisation et de management pour mener avec efficacit la gestion dun projet informatique en respectant les dlais. dployer un savoir-faire convaincant et une mthodologie pour exceller dans la gestion de projet informatique avec une efficacit optimale.

Technologie Web

ENSA Kenitra 2013

Le Site Web

Technologie Web

ENSA Kenitra 2013

Forme et Design
Le design dun bon site web nest pas un coup de hasard, bien videmment il y a toujours des rgles suivre pour aboutir un bon rsultat. La rgle des tiers dans le Webdesign :

Une autre clbre division mathmatique cest la division en respectant la rgle des tiers. Cette rgle aide crer une composition quilibre en divisant la toile (Body) neuf parties gale. Une forme artistique de la rgle des tiers est souvent utilis en photographie, car a reprsente un guide simple est facile qui permet davoir une bonne composition de limage. Cest pour cela que la plupart des camras numrique ont la fonction qui permet de diviser leurs crans LCD neuf parties gales. Mme certains DSLR ont cette fonction, ils mettent quelques points lumineux dans le viseur lorsquon focalise sur un objet.

On a pos le menu dune manire quil occupera le 1 er tiers de la division vertical, le 2eme tiers vertical pour limage et finalement le 3me tiers vertical pour la description de limage. Pour le niveau horizontal, limage et la description occupe les 2 premiers tiers et le contenu du site occupera le 3eme tiers en bas. En respectant cette division on obtient un site qui donne lutilisateur un sentiment dharmonie pour il se sent laise en voyant le design.

Technologie Web

ENSA Kenitra 2013

Mise en place de la forme


Un bon web design nest pas seulement des petits positionnements des divisions et dans lesprance quon obtient quelque chose dhomogne la fin. Non ! Mais cest toute une structure cach derrire. Parmi les structures les plus connues du Web design on trouve les formes ergonomiques suivantes :

On a dcid dadapt une forme ergonomique qui mlange un peu entre la forme normale et avance. Voici ci-dessous le schma suivant qui reprsentera les diffrentes parties du code de site avec les noms des ID utilis pour chaque division.

10

Technologie Web

ENSA Kenitra 2013

Schma gnrale du site web

Modle 3D pour visualiser les diffrentes parties du site web

11

Technologie Web

ENSA Kenitra 2013

Amlior lattractivit visuel du site web


Astuce 1 : Le Sous-Menu (Que du CSS) La structure seule nest pas suffisante pour une belle interface web. Sil ny a pas dinteraction avec la souris et les mouvements de lutilisateur, il ne se sent pas attir pour visualiser le reste du site. Parmi les Astuces quon utilise souvent pour donner une bonne vision du site web il y a les animations. On peut appliquer des animations sur plusieurs parties des sites web mais la partie la plus importante et qui ncessite une animation est laffichage des Sous-menu. Plusieurs techniques sont proposes pour faire ce genre danimation pour le menu que a soit en JavaScript, PHP, JQuery ou dautres langages de dveloppement web. Pour notre site web on a adopt la toute nouvelle technologie qui est aussi simple que belle, cest les transitions CSS3. Le schma suivant explique brivement la partie du code qui est responsable de lanimation de notre menu

Ce schma se traduit sous les lignes de code suivantes : 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. nav ul li ul { position:absolute; opacity:0; Left :-100em; } nav ul li:hover ul { webkit-transition : 0.3s ; /*le webkit de chrome et Safari */ opacity:1; left:140px; }

Le mme principe de transition est aussi utiliser pour le paramtre padding-right du <li> qui se trouve dans le menu, sauf que cette fois ce nest pas pour rendre une partie visible, mais cest seulement pour faire bouger un peu le texte aprs un Hover sur les <li> du Menu.

12

Technologie Web

ENSA Kenitra 2013

Astuce 2 : insrer du code color dans le site

Le but de cette manipulation cest davoir du code color dans le contenu du site puisquil sagit dun site de programmation. On peut faire cela en utilisant 2 mthodes : 1- Coloriage sur cot client en utilisant du JavaScript ; 2- Coloriage sur cot serveur en utilisant PHP ; Ces deux mthodes sont trs utilises dans des extensions pour les diteurs textes web (tel que TinyMCE), mais dans notre cas on va utiliser une petite Astuce qui va nous faire gagner beaucoup de temps. Il sagit de trouver un site qui utilise dj lune de ces mthodes, puis copi le code CSS de la partie en question. On a utilis lditeur de texte Pastebin.com avec la forme du Code ADA puis prendre le code source de la page et lintgr directement dans notre site web. Le rsultat obtenu est le suivant :

On peut jouer par la suite avec le code CSS pour le rendre beaucoup plus homogne avec le contenu du site web

13

Technologie Web

ENSA Kenitra 2013

Astuce 3 : intgration dun compilateur enligne

La programmation nest plus dpendante dun pc de bureau pour quun bloc de code soit compil, il existe aujourdhui plusieurs compilateurs de code en ligne qui donne un rsultat similaire la compilation dun PC. Cest pour cela quon a pens intgrer un compilateur dans le site pour que lutilisateur puisse tester son code en mme temps quil apprenne des techniques de programmation en temps rel avec ADA. Pour ce faire on utilise la balise <Object> qui prend comme paramtres le type du document text/html et la source du document data= " http://www.compileonline.com/ " <object type="text/html" data="http://www.compileonline.com/compile_ada_online.php" />

14

Technologie Web

ENSA Kenitra 2013

Partir plus loin

15

Technologie Web

ENSA Kenitra 2013

Hbergement :
Un hbergeur web (ou hbergeur internet) est une entit ayant pour vocation de mettre disposition des internautes des sites web conus et grs par des tiers. Il donne ainsi accs tous les internautes au contenu dpos dans leurs comptes par les webmestres souvent via un logiciel FTP ou un gestionnaire de fichiers. Pour cela, il maintient des ordinateurs allums et connects 24 heures sur 24 Internet (des serveurs web par exemple) par une connexion trs haut dbit (plusieurs centaines de Mb/s), sur lesquels sont installs des logiciels : serveur HTTP (souvent Apache), serveur de messagerie, de base de donnes... De nos jours il existe plusieurs hbergeurs gratuits ou payants qui nous permettent de mettre nos pages dessus avec diffrents services et options.

Exemple dhbergement avec OVH OVH est un hbergeur de sites web franais. Il propose des serveurs ddis, des serveurs privs, de l'hbergement mutualis, du housing, des lignes ADSL ainsi que SDSL, l'enregistrement des noms de domaine, ainsi que de la tlphonie sur IP. Avec environ 140 000 serveurs en novembre 2012, OVH dispose de l'un des plus grands parcs de serveurs au monde1. 1- On verifie que le nom du site quon veut faire est bien disponible

16

Technologie Web

ENSA Kenitra 2013

2- Choisir la forumule qui nous convient et facturation(Les formules diffrent du nombre de BD, espace, nombre demail) ex : offre gold

3- Apres payement on reoit lemail contenant les infos daccs au site

17

Technologie Web

ENSA Kenitra 2013

4- Connexion au site et transfert des donnes (via FileZilla)

Rfrencement :
Le rfrencement est l'action de rfrencer, c'est--dire mentionner quelque chose ou y faire rfrence. Sur Internet, faire un lien d'une page A vers une ressource B, c'est y faire rfrence et donc rfrencer la ressource B depuis la page A. Par vulgarisation, l'action gnrique d'inscription dans les moteurs de recherche a t appele rfrencement. Aujourd'hui, sa pratique s'articule autour des outils de recherche, plus particulirement des moteurs et des annuaires de recherche, en tentant d'amliorer le positionnement des sites (et donc leur visibilit) dans leurs pages de rsultats. La position sur les moteurs de recherche est une des principales sources de cration de trafic sur un site web aujourd'hui. En effet, il permet aux internautes d'accder un site sans connatre son adresse. Un bon rfrencement sur Internet est essentiel puisque 34 % des internautes cliquent sur le premier lien naturel d'une page de rsultats note 1. L'afflux principal provient des moteurs de recherche, mais nombre de visiteurs passent galement par des annuaires. On trouve galement de plus en plus de sites de bookmarks (marque-pages), qui permettent aux internautes de conserver les adresses de leurs sites prfrs, commerciaux ou non. Comment rfrencer son site sur le moteur de recherche Google ? Le moteur de recherche le plus connu mondialement permet dindexer notre site par deux mthodes distinctes : La premire consiste accder la page web destine aux webmasters : https://www.google.com/webmasters/tools/home?hl=fr

18

Technologie Web

ENSA Kenitra 2013

Et de suivre les tapes pour vrifier lidentit du propritaire.

Aprs cela il nous faut crer le sitemap de notre site (il existe des outils qui peuvent les gnrer automatiquement) et luploader sur notre espace webmaster.

Finalement il faut mettre un fichier texte nomm robots.txt qui contient les privilges daccs vers les fichiers, ces privilges sont appliqus aux robots des moteur de recherche pour quils vrifient quel sont les pages quils ont le droit indexer. On place ce fichier dans la racine du ftp de notre site.

19

Technologie Web

ENSA Kenitra 2013

La deuxime mthode consiste insrer des mta-tags spciaux (balise <meta/>) dans la partie <head> de toutes les pages de notre site comportant le titre, les mots clef et la description de la page quon veut afficher sur le moteur de recherche. <meta name="keywords" content="key1,key2,..."/> <meta name="description" content="ce site est un projet d'ada ..."/> Note : en peut aussi activer le preview de notre site dans le rseau social Facebook en insrant le mta suivant : <meta property="og:image" content="linktoimg.png"/> De mme : og:title og:url og:type

Ides pour rendre le site dynamique


Ralisation dun forum de discussion En informatique, un forum est un espace de discussion publique (ou au moins ouvert plusieurs participants). Les discussions y sont archives ce qui permet une communication asynchrone (c'est ce qui diffrencie les forums de la messagerie instantane). Le terme forum de discussion est un plonasme. Forum est un terme d'origine latine (popularis par l'anglais) dsignant une place de la ville consacre la discussion et au commerce. Lintgration dun forum notre site permettra donc daccentuer laspect dynamique dune part, et de construire une communaut dautre part. Cette communaut regroupe pourra donc changer diffrentes expriences vcus avec ce langage de programmation, ainsi que des lignes de codes et des espaces dentraide. En gros le forum permettra donc plusieurs personnes dapprcier ce langage et de contribuer son dveloppement. Ralisation dun Blog

Un blog est un type de site web ou une partie d'un site web utilis pour la publication priodique et rgulire de nouveaux articles, gnralement succincts, et rendant compte d'une actualit autour d'un sujet donn ou d'une profession. la manire d'un journal de bord, ces articles ou billets sont typiquement dats, signs et se succdent dans un ordre antchronologique, c'est--dire du plus rcent au plus ancien. Les appellations blogue ou cyber-carnet sont galement utilises, notamment au Qubec.

20

Technologie Web

ENSA Kenitra 2013

Le blog nous permettra donc de contribuer au site par les diff rents aspects quil offre comme : Regroupement des actualits des technologies des systmes en temps rel. Poster des reportages et des rapports de ce type de programmation en pratique. Augmenter le rfrencement du site web.

Autres

On peut tout de mme ajouter quelques goodies (utilitaires) notre site afin daides les internautes avoir quelques information pratiques concernant le site tel que : Calendrier : Regroupe les dates importantes qui ont relation avec la thmatique du site. Newsletter : Permet au visiteur de se souscrire sur le site pour avoir toute lactualit du site via courrier lectronique. Flux RSS : La cration dun flux RSS pour le site augmentera significativement son rfrencement auprs des moteurs de recherche, en plus de nous faciliter la tche pour crer une application mobile par exemple. Sans oublier le vrai rle qui permet au souscris de recevoir des notifications lorsque le site vient de subir un changement (Ajout darticle, suppression.). Autres : Compteur de visites, widget site pour navigateurs,.

21

Technologie Web

ENSA Kenitra 2013

Webographie

22

Technologie Web

ENSA Kenitra 2013

Ebooks
o o o o o

Systme temps rel et ordonnancement par B.Sadeg || claude.baron@insa-toulouse.fr Systme temps rel : caractristiques, classification et anomalies INTRODUCTION LA PROGRAMMATION TEMPS REL par Prof. Yann Thoma Exemples de systmes temps rel et choix dimplmentation par Franoise Simonot Lion et Yvon Trinquet Introduction aux systmes temps rel Iulian Ober IRIT || ober@iut-blagnac.fr

internet
o o o o o o

http://www.infres.enst.fr/~pautet/Ada95/chap26.htm http://beru.univ-brest.fr/~singhoff/cheddar/publications/martin04.pdf http://en.wikipedia.org/wiki/Rate-monotonic_scheduling http://www.irit.fr/~Iulian.Ober/str/STR-1.1.IntroSTR.pdf http://www.reds.ch/share/cours/PTR/polycopie/chap1-3.pdf http://en.wikipedia.org/wiki/Ada_(programming_language)

23