INFO4007 - S. C. TECHNOLOGIE DE L INFOROUTE EXAMEN FINAL - 35% Nom : NI : I. Questions de cours (28 points) Depuis 2009, quels sont les deux groupes de travail qui collaborent pour définir les nouveaux standards du web? Quels sont les trois langages de base utilisés généralement en conjonction pour concevoir des pages web? 1 (3 points) Quel est le rôle d un moteur de rendu? Citer au moins deux moteurs de rendu et les fureteurs qui les utilisent. (3 points) 1. Disons sans faire appel à une base de données. Éric Hervet - Page 1 sur 8 - Jeudi 24 avril 2014
De nos jours, lorsqu on crée un site web, quelle solution est recommandée pour s assurer que le site sera fonctionnel pour la plupart des utilisateurs, quels que soient le type d appareil et le système d exploitation qu il utilise? Citer deux formats vidéo libres (sans brevets). Quels sont les trois types d images (frames) qu on trouve dans un flux MPEG? Expliquer brièvement. (3 points) Quels sont les deux types de stockage web (Web Storage)? Expliquer brièvement leurs différences. Éric Hervet - Page 2 sur 8 - Jeudi 24 avril 2014
De quelles deux universités canadiennes sont issus les concepteurs de RIM 2, devenue BlackBerry en janvier 2013? (1 point) Citer les trois classes QML correspondant aux différentes mises en page (layouts) d applications pour le système d exploitation BlackBerry 10. Expliquer brièvement leurs différences. (3 points) Quelle architecture de processeur équipe la plupart des téléphones intelligents actuels, incluant le BlackBerry Z10? Expliquer brièvement pourquoi ce type de processeur est plus populaire pour des téléphones et tablettes que pour des ordinateurs de bureau ou portables. 2. Research In Motion. Éric Hervet - Page 3 sur 8 - Jeudi 24 avril 2014
Que diriez-vous des avantages et inconvénients de concevoir une application mobile native plutôt que web, notamment en ce qui concerne l accès aux divers capteurs matériels? Une image en résolution 4K (ou Ultra HD) correspond à quatre fois la taille d une image haute définition 1920 1080 pixels. Soit une image couleur Ultra HD où chaque pixel est codé sur quatre octets. L image est compressée au format JPEG avec un taux de 90%. Calculer la taille de l image JPEG 3. Qui est considéré comme le père du World Wide Web? (1 point) Bruce Lee Steve Jobs Linus Torvalds Clint Eastwood Tim Berners-Lee Richard Stallman 3. On prendra 1 Ko = 1000 octets, 1 Mo = 1000 Ko, etc. Éric Hervet - Page 4 sur 8 - Jeudi 24 avril 2014
II. Exercice jquery (4 points) La page web correspondant au code source du fichier slider.html après la figure contient un ascenseur (slider) de cinq valeurs, suivi d un texte qui s ajuste automatiquement lorsque l utilisateur bouge le curseur. Au chargement de la page, l ascenseur est au niveau 2. Modifiez slider.html pour que le texte correspondant aux cinq valeurs possibles de l ascenseur devienne : Très facile (1), Facile (2), Modéré (3), Difficile (4) et Très difficile (5). <!DOCTYPE html> <html> <head> <meta charset=" utf 8 " /> < t i t l e>fichier s l i d e r. html</ t i t l e> <script src=" http : / / ajax. googleapis. com/ ajax / l i b s / jquery / 1. 5 / jquery. min. j s "> </ script> <script src=" http : / / ajax. googleapis. com/ ajax / l i b s / jqueryui / 1. 8 / jquery ui. min. j s "> </ script> Éric Hervet - Page 5 sur 8 - Jeudi 24 avril 2014
<s t y l e> #s l i d e r { width : 25%; </ s t y l e> </ head> <body> <div id=" s l i d e r "></ div> <br /> <div id=" niveau ">Niveau 2</ div> <script> $ ( document ). ready ( function ( ) { $ ( "#s l i d e r " ). s l i d e r ( { o r i e n t a t i o n : horizontal, min : 1, max : 5, step : 1, value : 2 ) ; $ ( "#s l i d e r " ). bind ( " slidechange ", function ( event, ui ) { var s l i d e r V a l = $ ( "#s l i d e r " ). s l i d e r ( " option ", " value " ) ; $ ( "#niveau " ). t e x t ( " Niveau "+s l i d e r V a l ) ; ) ; ) ; </ script> </ body> </ html> Éric Hervet - Page 6 sur 8 - Jeudi 24 avril 2014
III. Spacequotas (3 points) Compléter le code source du fichier main.qml après la figure pour que les boutons aient des proportions relatives comme sur la figure, c est-à-dire : sur la première ligne, le bouton 1 occupe un tiers de la largeur, le bouton 2 deux tiers ; sur la deuxième ligne, le bouton 4 est deux fois moins large que le bouton 5, lui-même deux fois moins large que le bouton 3. (On ne tient pas compte des espaces entre les boutons, qui sont ajustés automatiquement.) /* Fichier main.qml */ Page { Container { id : root Container { id : ligne1 layout : StackLayout { o r i e n t a t i o n : LayoutOrientation. LeftToRight ; t e x t : "Bouton1" t e x t : "Bouton2" Éric Hervet - Page 7 sur 8 - Jeudi 24 avril 2014
Container { id : ligne2 layout : StackLayout { o r i e n t a t i o n : LayoutOrientation. RightToLeft ; t e x t : "Bouton3" t e x t : "Btn4" t e x t : "Bouton5" Éric Hervet - Page 8 sur 8 - Jeudi 24 avril 2014