Accueil - Apprentissage des langages de code descriptifs et de programmation : HTML, CSS, PHP pour la création de site Internet à l'image de l'entreprise.
à propos de ce site :
Je construis ce site afin de m'exercer à coder en HTML et CSS.
Actuellement, pour rendre mon site dynamique, j'étudie PHP et phpMyAdmin ainsi que Ajax / jQuery.
Pour cela, j'utilise les tutoriels du Site du Zéro ainsi les formations disponibles sur le site d' Elephorm.
Ce site a été façonné en ligne code.
La mise en page est bien entendu réalisée par des feuilles de styles, écrites en CSS, liées au document HTML. Il n'y a pas de tableau pour placer les éléments.
Le site créé par Dave Shea, Web Designer canadien : CSS Zen Garden regroupant de magnifiques mises en pages m'a inspirée.
Ainsi, le travail de Brad Daily (États-Unis) m'a expliqué la navigation principale sur un cadre ombré. Avec l'exemple de Lars Daum (Allemagne), j'ai mis un dessin en arrière-plan.
Le gabarit de la page est un mélange des modèles n° 3 et n° 11 issus des exemples proposés sur le site d'Alsacréations.
Je me suis donné les objectifs suivants :
- Mon site doit être validé par le W3C en XHTML et CSS.
L'utilisation des propriétés CSS3 : "border-radius" n'est pas validé. Cette erreur est donc volontaire afin d'obtenir des coins arrondis pour l'explication des liens externes du menu vertical.
Autre invalidation en CSS : pour corriger les bugs d'Internet Explorer 6 et 7, j'ai utilisé des "hacks" en css afin qu'un style soit exclusivement appliqué à eux. Exemple : /margin : 10px; pour IE7. Ces "hacks" ne sont pas validés, mais indispensables pour une mise en page correcte.
- Il doit être compréhensible sans mise en page, je souhaite le rendre accessible aux personnes malvoyantes.
- Le rendre agréable à regarder…
Outils :
Première configuration :
Mon outil pour ce travail est un ordinateur " MacBook Pro Intel Core i7 " dont le disque dur est partitionné en triple boot : Mac OS X, Linux et Windows.
Ce triple boot autorise le démarrage de l'ordinateur en Mac OS X, linux ou Windows XP et vérifie la compatibilité du site dans ces trois configurations.
Pour réaliser un triple boot, j'ai suivi l'excellent tutoriel de Videonoob.
Le problème avec un triple boot est le suivant : il faut toujours rédémarrer pour changer de système.
Triple Boot :
-
Seconde configuration :
Sur cet autre ordinateur, je travaille que sur le système Mac. L'OS est Mavericks et je l'ai transformé en serveur grâce au logiciel MacPorts qui est un gestionnaire de paquets libre qui simplifie l'installation de logiciels gratuits et/ou en opensource sous Mac OS et Darwin.
Navigateurs :
Pour chaque système, les navigateurs sont les suivants :
- El Capitan 10.11.3
- Safari Version 8.0
- Firefox Version 33.0.1
- Opera Version 25.0
- Google Chrome Version 38.0.2125.104
- Linux Ubuntu Trusty Tahr 14.04 LTS
- Firefox Version 14.0.1
- Windows XP Version 2002 Service Pack 3
- Internet Explorer Version 8
- FireFox Version 10.0.2
- Opera Version 11.52
- Google Chrome Version 21.0
Transformations :
Pour travailler sur un site en PHP, j'ai du transformer mon ordinateur en serveur local : activer Apache 2, ainsi que PHP 5.3.2, tous deux déjà intégré au système Mac OS X.
L'activation de PHP s'effectue par modification d'un fichier dans un répertoire caché et protégé, par lignes de commandes dans l'utilitaire Terminal. Il existe de nombreuses extensions à PHP tels que xDebug, imagick...
Le serveur de base de données installée est : MySQL, logiciel Open Source, absent à l'origine sur Mac OS X. Après téléchargement, il s'installe aussi en lignes de commandes.
La gestion des données s'effectue grâce à l'application Web : phpMyAdmin, après initialisation de son fichier de configuration, phpMyAdmin devient accessible en local.
Les tutoriels de Jérôme Jaglale, celui de François Gallienne m'ont permis ces modifications ainsi qu'une meilleure compréhension des commandes UNIX, exécutées dans l'application Terminal.
Avec les systèmes d'Apple : Lion et Mountain Lion, j'ai fait une installation différente de la précédente : je n'utilise plus Apache et PHP pré-installés par Apple. Apache 2, MySQL 5, PHP 5.3 et PHPMyAdmin 3.4.5 sont installés grâce à au logiciel MacPorts. Un tutoriel très clair ici de : Fabien Pennequin
Puis, le dernier système d'Apple est arrivé : Mavericks. J'ai décidé, après l'indispensable sauvegarde des dossiers, de faire une "clean install" plutôt qu'une mise à jour.
De plus, ayant vraiment pris goût aux lignes de commandes avec l'application Terminal, j'ai installé : Apache 2, PHP 5.5, MySQL 5.6 uniquement en ligne de commande. Pour cela, j'ai suivi les vidéos très intéressantes et détaillées de MacDev sur YouTube de l'installation de XCode 5.1, Commande Line Tools et Macports 2.2.1 spécial Mavericks, en passant par l'installation de Apache2 et PHP 5.5. Pour installer MySQL 5.6, aprés quelques essais infructueux, j'ai suivis la méthode de Kicaj Blog. Pour la gestion des données, j'ai remplacé phpMyAdmin par Sequel Pro que je trouve beaucoup plus simple.
Conclusion : une installation qui fonctionne parfaitement et qui m'a permis d'être encore plus à l'aise avec les commandes UNIX. Lorsque j'ai rencontré des erreurs, j'ai désinstallé MacPorts et j'ai recommencé, car, l'informatique c'est parfait pour travailler, mais ce qui me plaît c'est essentiellement de comprendre comment cela fonctionne !
Il existe une autre alternative beaucoup moins risquée pour le disque dur et les données de l'utilisateur, sous forme de logiciel libre, plus simple à mettre en place et à configurer. Le téléchargement et l'installation de ce logiciel, pour Mac, Linux ou Windows, sont décrits sur le Site OpenClassrooms (anciennement site du Zéro).
Internet :
Autre outil indispensable pour ce travail : Internet.
Pourquoi les pages sont-elles vides ?
Aujourd'hui, j'ai vingt-six pages en PHP sur mon site et de nombreux dossiers dont le dossier "include" comportant lui-même treize pages en PHP, tels que "entete", "pied_de_page", "navigation" ; plus un sous-dossier nommé "verification" dont la fonction est de bloquer les robots, d'ailleurs, ce dossier n'a rien à faire ici !
Ce nombre important de pages, dossiers et sous-dossiers pose des problèmes de maintenance du site. Une architecture comme : Modèle Vue Controle semble tout indiquée pour les résoudre.
Le même code est parfois répété dans plusieurs pages, cette redondance est inutile ! La Programmation Orientée Objet permettra d'organiser correctement le code.
Dans les bases de données, la jointure des tables permettra d'éviter les répétitions et simplifiera la maintenance.
La prochaine étape sera d'analyser les besoins de ce site, en imaginant une évolution large, puis de concevoir un schéma fonctionnel et ensuite de programmer l'ensemble.
NB : Pour un aperçu correcte du site sous Windows, utilisez Firefox, Google Chrome ou Opéra.
Firefox
Firefox est un logiciel libre, gratuit, sécurisé, fiable et rapide, idéal pour l'écriture en ligne de code, avec une multitude d'extensions, dont l'incontournable Firebug. Ce dernier peut débuguer, éditer et modifier le HTML, le CSS et le JavaScript d'une page Web.
Google Chrome
Opéra
Internet Explorer
Internet Explorer pose de gros problèmes avec le standard établi par le World Wide Web Consortium !
Internet Explorer 6 et 7 sont obsolètes, la mise à jour en IE 8 est indispensable pour voir correctement le site ! Il est toutefois préférable d'utiliser Firefox.
Quelques aides
Une étude comparative des navigateurs sur Wikipédia.
Les tableaux de statistiques des navigateurs utilisés sur W3Schools.
Les Bugs d'Internet Explorer en CSS - Bug IE 6 - Bug IE 7 - compatibilité entre navigateurs - Firefox 2 et 3 sur Esprit Créatif.
Vous êtes le : 89245ème internaute à visiter cette page, depuis la mise en place du compteur.