Le document détaille les activités et technologies utilisées par The Media Innovation Group (The MIG), une entreprise basée à New York, notamment dans l'analyse de données et le développement en JavaScript. Il aborde divers sujets tels que la reconstruction des systèmes, l'analyse des cookies, et les graphes 3D, tout en mettant en avant des technologies comme three.js et dat.gui. La conclusion souligne l'environnement dynamique de l'entreprise et la bonne adéquation de la formation avec les exigences du stage.

1. Représentation de données, analyse de
données et développement JavaScript
The MIG – New York City
Jerome Champigny – MTI 2012

2. En quelques mots
 Maitre de stage
– Jad Nehme
 Vice président « Engineering »
 « Engineering associates »
 Equipe de développent UI (Interface Utilisateur)
 Siege social au cœur de New York City
2

3. 24/7 Media & The Media Innovation Group
 “Powered by 24/7 Media”
 100 Millions de dollars de CA
 600+ employés
 18 bureau a travers le monde
 12 pays
 Siège social
– 132 West 31st Street New York, NY 10001
 PDG
– David J. Moore
 WPP group
– Valorisation totale de 25 Milliard de dollars
3

4. Reconstruction
4

5. Sujet de pré-embauche VS sujet actuel
 Data mining  Opt out système
– Recherche de récurrences – Bibliothèque JavaScript
– Catégorisation – Apache / PHP
 Etude des cookies
– Framework de génération de statistiques
– Optimisation – Comportement sur Safari
 Graphes 3D
 Porter les outils d‟analyse de BDD
– Bibliothèque JavaScript
– Evaluation des technologies telle que
MongoDB, InfiniDB, etc. – Web GL
– Three.js
 Visualisation
 Zebra
– IU en HTML5
– C++
– Analyse multidimensionnelle
 ZAP Administrator
– Améliorer l‟IU
– J2EE / Web Service
– Python
– JavaScript
5

6. Planning
6

7. Etude des cookies
 Défaut de Safari (Third party cookies)
 Technologies
– Apache
– PHP5
– JavaScript
 Test de cas sur Safari
– Iframe avec FORM en méthode POST ou GET et blocage
– Création après blocage et présence antérieure
– Création de sous domaine
 Résultats
Safari IE9 Chrome Firefox
With security Has cookie No cookie No cookie No cookie
Without security Has cookie Has cookie Has cookie Has cookie
7

8. Opt out
 C‟est ?
– Devenir invisible aux yeux des traqueurs
 Objectifs
– Réunir les scripts de Real Media et du MIG
– Créer un script client générique
 Technologies
– JavaScript
– Python
– Apache
8

9. Opt out
 Ancienne solution
 Problèmes
– Boucle de redirection code 310
– IE6 ne supporte pas trop de redirections
 Solution
– Client JavaScript appelant simultanément chaque domaines
– Utilisation des jetons CSRF (Cross-site Request Forgery)
9

10. Opt out
 Bibliothèque OOP
– Mot clef prototype
 Appel par une simple fonction
 Retour asynchrone des résultats
 Affichage singulier du succès (OK) ou de l‟ échec (KO)
 Problèmes rencontrés
– Domaine plus ou moins long à joindre
– Erreur 404 d‟une iframe plante l‟exécution totale
 Résolution
– Mise en place d‟un timeout général
10

11. Graphes 3D
 Volume de données du MIG considérable
 Ecarts sur un même graphe importants
 Technologies web obligatoires
– Flex
 Applications du MIG en cours de changement de technologie
– Flash
 Très proche de Flex
– JavaScript WebGL
 Nouvelle technologie
 Three.js
 Intéressant
11

12. Three.js
 « Lightweight » 3D Library
 Grosse communauté
 Bonne documentation
 Support rapide
 Mainteneurs chez Google
 Portable sur
– Safari
– Firefox
– Chrome
 Bibliothèque objet
– Camera, Scene, Lights, etc.
– Object3D, Face3, Face4, etc.
12

13. Dat.gui
 Interagis avec des objets
 Modifie dynamiquement les attributs
– String
– Int
– Bool
– Drop down list
 Appelle les fonctions
 Crée des répertoires
 Simple et très efficace
– Suffit d„une déclaration
– Ajout des attributs
13

14. L‟idée
 Forme en couverture
– Impossible car trop de fluctuation dans les données
 Volumes
– Toujours une valeur constante
– Line chart mais ferme
 Récupération des données en JSON
– Apache
– PHP5
 Grille dynamique
– Adapte la taille des axes
14

15. Création des volumes
15

16. Autres fonctionnalités
 Souris
– Zoom
– Rotation
 Droite
 Gauche
– Translation
– Survol avec affichage des données
– Cliquer centre la camera
 Cacher certaines géométries
16

17. Example 1
17

18. Example 2
18

19. Analyse de logs
 Objectifs
– Débusquer les utilisateurs de Safari visés par l‟erreur
– Créer un filtre afin de ne plus les voir apparaitre
 Etapes
– Liste d‟identifiant utilisateurs
– Recherche dans les logs
– Extraction de l‟activité des utilisateurs
– Analyse de chaque lignes
 Comment?
– Ecriture d‟un parseur en C++
 Liste d‟identifiant
 Fichiers de logs
 Fichier de resultats filtrés
19

20. Analyse de logs
 Example
Field Description
2603648971646124 User ID
C Request status: C for “Cookied”, T
for “Test”, U for “Uncookied”
imp Request type: impression, event …
210.104.146.253 User IP
1330905600 Request timestamp
"Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; User Agent
Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR
3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0;
MASM; InfoPath.2; .NET4.0C)"
20

21. ZAP Administrator UI
 Management de campagnes
– Fonctionne avec de nombreux serveurs de pub
– Permet de gérer les placements
– Visualisation analytiques
 Technologies
– Python (Django), J2EE, Tomcat
 Problèmes
– Arrivé de gros acteurs (Macy‟s)
– “Data error” dans certains tableaux comme placements
– Requête SQL
 Imbrication de plus de 80 000 identifiants
 Oracle limite à 1000
 Solution
– Pagination dans les requêtes
21

22. Conclusion
 Entreprise dynamique et technologique
 Projet divers et intéressant
 Technologies de pointes et innovante
 Très bonne ambiance, très bonne intégration
 Formation Epita en adéquation avec le stage
 Futur
– The MIG - Agence Marketing
– Employé à 24/7 Media - Produits techniques
– Debut 1er Oct. 2012
22

23. Jerome Champigny
Software Developer
jerome.champigny@247realmedia.com
23