UE Ingénierie Multi-Media et Web (IMW) Master Informatique 2 eme Année 05 Janvier 2011 Travaux sur Machines Encadrés CSS Avancé et Analyse de Site Objectif Dans le premier cours sur le développement web vous avez créez une base de données MySQL avec une liste des images, puis vous avez modifié CodeIgniter pour créer un application simple avec une modèle, contrôleur et view pour les images. Votre application web devrait être capable d'afficher des images par page et de permettre une navigation simple par page ou par recherche texte. L'objectif de ce 2eme cours est d'abord d'apprendre à utiliser du CSS à travers un «framework» qui inclut un fonction «reset» pour normaliser les différences entre navigateurs et utiliser le framework pour appliquer une mise en page avancé pour l'affichage des images. Vous allez personnaliser le style avec votre propre feuille de style et ajouter des styles disponible dans CSS3 qui marche dans Firefox et Chrome. La 2eme objectif est d'apprendre à utiliser des outils de débogage et analyse pour tester, vérifier et analyser votre site. Pour cela vous allez utiliser les modules complémentaires de Firefox (Firebug et YSlow) pour aider à personnaliser et testez votre CSS, puis ensuite de analyser le chargement des éléments de votre site. Vous allez aussi commencer à optimiser l'application en convertir vos images en JPEG optimisé. Prologue : SQL, Bash Scripting et CodeIgniter Quelques astuces pour compléter le premier TP : SQL : Attribution de clé primaire automatiquement avec les paramètres PRIMARY KEY et AUTO_INCREMENT : ALTER TABLE images CHANGE id id INT PRIMARY KEY AUTO_INCREMENT; Insertion d'une nouvelle ligne : INSERT INTO TABLE images(path,comment) VALUES('image1.png','premier image') ; Bash Scripting : Boucle: for file in *.png; do ; done Shell Redirection: echo ''INSERT INTO TABLE images(path,comment) VALUES ('image1.png','premier image');'' mysql imw Substitution de suffix.png vers.jpg: echo 'image1.png' sed -e 's/.png/.jpg/' Utilisation de l'output d'une commande: `echo image1.png sed -e 's/.png//'`
CodeIgniter : Configuration : Charger automatiquement les librairies «database» et «session» dans system/application/config/autoload.php: $autoload['libraries'] = array('database','session'); Chemins utilisé par CodeIgniter par défaut : http://<ton url>/index.php?image pour le contrôleur image (fonction index()) http://<ton url>/index.php?image/show/1 pour le contrôleur image, fonction «show» avec paramètre «1» http://<ton url>/index.php?image/search/elephant pour le contrôleur image, fonction «search» avec paramètre «Elephant» Exemple contrôleur : system/application/controllers/image.php <?php class Image extends Controller function Image() parent::controller(); $this->load->model('imagemodel'); function index() $data['title'] = "List"; $data['results'] = $this->imagemodel->getall(); function show($id) $data['title'] = "Show"; $data['results'] = $this->imagemodel->get($id); function destroy($id) $data['title'] = "Destroy"; $data['results'] = $this->imagemodel->delete($id); function search($q,$order=null) $data['title'] = "Search"; $data['results'] = $this->imagemodel->query($q,$order); Exemple Modèle : system/application/models/imagemodel.php Mais attention à une bizarrerie de CodeIgniter liée au majuscule/minuscule!!!! Le fichier doit être tout en minuscule (imagemodel.php), mais la classe peut être déclaré en majuscule (class ImageModel). Mais dans ce cas, depuis le contrôleur, le premier caractère doit être en minuscule ($this->load->model('imagemodel');). <?php class ImageModel extends Model private $table = 'images'; function ImageModel() // Call the Model constructor parent::model(); function getall()
$query = $this->db->get($this->table); function query($q,$order) $this->db->like( 'comment', $q ); $this->db->or_like( 'path', $q ); $this->db->from($this->table); if($order) $this->db->order_by($order); $query = $this->db->get(); function get($id) $query = $this->db->get_where( $this->table, array('id' => $id) ); function delete($id) $this->db->delete( $this->table, array('id' => $id) ); Exemple View : system/application/views/images/index.php (C'est une bonne idée de créez des sous-dossiers pour chaque contrôleur ex : views/images etc) <html> <head> <link href="<?php echo base_url();?>css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <h1><?php echo $title;?></h1> <ul> <?php foreach($results as $item):?> <li><?php echo $item->id;?> : <?php echo $item->path;?></li> <?php endforeach;?> </ul> </body> </html> Exercice 1: Installation et configuration de la librairie Blueprint Téléchargez la librairie du site: http://blueprintcss.org/. Lisez le documentation sur le site et familiarisez vous avec les concepts et la structure: reset.css typography.css grid.css ie.css print.css forms.css Intégrez-le dans votre application CodeIgniter dans un sous-dossier «css» puis activez le «helper» pour les URL dans CodeIgniter en l'ajoutant dans le fichier config (system/application/config/autoload.php): $autoload['helper'] = array('url'); Incluez chacun dans vos fichiers views dans la partie «head» de votre HTML avec par exemple: <link href="<?php echo base_url();?>css/screen.css" rel="stylesheet" type="text/css" />
Exercice 2: Ajouter votre propre style Ajouter votre propre feuille de style dans le dossier css qui modifie les styles de Blueprint pour personnaliser votre affichage web. Modifiez pas les CSS fourni avec Blueprint, mais ajouter une nouvelle fichier CSS. Déplacer toute autre CSS dans le view vers votre fichier CSS. N'oubliez pas de l'inclure aussi dans l en-tête de votre view! Installez le module Firebug (http://getfirebug.com) dans Firefox et l'utilisez pour tester vos styles et pour faire des modifications en directe avant de les mettre dans votre fichier CSS. Utilisez les fenêtres «HTML» et «CSS» pour naviguer dans la structure de la page et dans la hiérarchie des règles CSS. Améliorer la structure de page pour votre application. Exercice 3: CSS3 Téléchargez et installez Chrome (http://www.google.com/chrome) si ce n'est pas déjà installé pour essayer CSS3. Ajouter des styles pour ajouter des bords courbé, de l'ombre et du dégradée linéaire dans votre style. Testez-le dans Firefox et Chrome. Comme la norme n'est pas encore établi, les navigateurs utilisent des préfixe différentes pour la même style. Par exemple pour Firefox : -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.75); et pour Chrome et Safari : -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.75); Ajouter au moins les versions pour Firefox et Chrome à votre feuille de style pour permettre les deux navigateurs de fonctionner. Vous pouvez essayer en ligne les style disponible sur un site comme par exemple : http://css3please.com/ Exercice 4 : Optimisation des Images Vos images sont dans le format PNG sans perte, ceux qui n'est pas optimale pour la transmission par internet. Donc, pour l'affichage, vous allez les convertir en JPEG en utilisant ImageMagick avec la commande «convert». Par exemple pour convertir le PNG avion1.png à un JPEG qui s'appelle avion1.jpg avec un niveau de compression de 75 (les compressions JPEG typiquement sont de 1-100) : convert avion1.png -quality 75 avion1.jpg Puis les optimiser avec «jpegtran». Si jpegtran n'est pas installé sur votre machine, téléchargez l'exécutable. Par exemple pour optimiser et convertir en JPEG progressive : jpegtran -optimize -progressive -outfile output/avion1.jpg avion1.jpg Il y en a plus de 1000 images, donc utiliser un script ou un peu de bash pour convertir tous et mettre les JPEGs dans un dossier accessible par votre application web. Exercice 5: Analyse de Site Vous allez utiliser Firebug et YSlow pour effectuer une analyse d'une site web. D'abord avec une site publique : http://www.upmc.fr/. Utilisez le module «Net» de Firebug pour mesurer les poids et temps de chargement de chaque élément sur la page. Activez Firebug et le module «Net» et chargez la page (shift-reactualise si vous avez déjà ouvert la page). Déterminez quelles éléments sont les plus lourds et plus lents à charger. Rechargez la page (réactualise sans shift) et voir lesquels sont maintenant les plus lents et combien sont maintenant en indiqué Status 304 (Non modifié).
Analyse avec Firebug Téléchargez et installez Yslow pour Firefox (http://developer.yahoo.com/yslow) et l'utilisez sur la même site web. Analyse avec YSlow Maintenant allez sur votre site et utiliser d'abord le module Firebug «Net». Sélectionnez tous et copier / collez dans OpenOffice Calc. Faites la même chose après une reactualisation (sans shift). Gardez ces données pour votre rapport et pour comparaison avec les résultats à la fin du projet.