Les langages pour le web
Quel que soit le langage utilisé, le code de la page doit présenté pour être lisible et comprensible par tous en vue d'éventuelles modifications.
Pour ce faire, deux choses importantes :
- l'indentation, c'est à dire la présentation sous forme de différents niveaux en utilisant la tabulation et les espaces.
Wikipédia présente les différents style d'indentation
- les commentaires, c'est à dire des informations pour structurer le code avec la présentation des différents blocs de la page et aussi des fonctions de la partie du programme,
voire des explications pour les parties de code les plus ardues.
Wikipédia présente les commentaires
Codecacademy : un site pour apprendre des langages Web
HTML et CSS
Préambule: Sur ce site, vous verrez d'abord le résultat d'une page HTML puis la page de programmation appelée le code source.
Pour voir la page, il vous suffit de l'ouvrir via un navigateur internet (FireFox, GoogleChrome, InternetExplorer, Opéra ou encore Safari, pour les plus connus).
Comment voir le code source en fonction du navigateur utilisé :
Une précision : je travaille sur PC avec le système d'exploitation Windows Vista. Les navigateurs ont été mis par ordre de qualité de lecture du code.
Le curseur de la souris doit être sur la page concernée.
FireFox : Clic gauche (pour les droitiers) ou clic droit( pour les droitiers) puis clic sur "Code source de la page". Le code source respecte la structure initiale et est présentée avec différentes couleurs et directement développé dans une autre fenêtre.
Bien lisible à mon goût.
GoogleChrome : Clic gauche (pour les droitiers) ou clic droit( pour les droitiers) puis clic sur "Afficher le code source de la page". Quasiment pareil qu'avec FireFox, sauf que le code est affiché dans un autre onglet et que la structuration de la page html n'est pas entièrement respectée.
Opéra : Clic gauche (pour les droitiers) ou clic droit( pour les droitiers) puis clic sur "Source". On obtient un affichage du code similaire à celui sur GoogleChrome.
Internet Explorer : Clic sur oustils dans la barre de menu, puis sur "outils de développement", une fenêtre s"ouvre en bas avec un onglet "HTML". Le code source respecte la structure initiale et est présentée avec différentes couleurs.
Cliquer sur les "+" pour développer les différentes parties et voir l'ensemble du code. Bien lisible à mon goût.
Safari : Clic gauche (pour les droitiers) ou clic droit( pour les droitiers) puis clic sur "Code source". On accède ainsi au code en noir et blanc et la présentation ne respecte pas entièrement la présentation initiale.
En fait, pour afficher le code HTML source dans une page HTML, il me faudrait écrire toutes les balises HTML avec les caractères spéciaux
compilés sur la page suivante.
Trop compliqué!! Trop long d'où la technique proposée!!
Vous verrez, chaque page est commentée pour que le code source soit compréhensible. Chacun devrait ainsi comprendre les balises, fonctions utilisées, se les appropier en faisant le lien entre le code source, les commentaires et son résultat, et, écrire ses propres pages. Chaque balise est commentée seulement à sa première utilisation dans la rédaction d'une page.
En HTML, Les commentaires sont en vert et encadrés par ‹!-- et --›. Ils précédent les lignes consernées. La mise en forme des pages devrait être de plus en plus riche au fil des pages.
Le "dico" de l'HTML par W3 School : la référence accompagnée de tutoriels
Les cours de Pol GUEZENNEC, Enseignant à l'école supérieure d'art de Quimper
Comment ça marche et l'html
Jaws actions
HTML 1 : Structure html
1-1 Architecture type d'une page HTML
1-2 Titres, paragraphe et listes
Intégrer une police spéciale à un site
1-3 Mise en forme du texte, police, taille
1-4 Validation de l'html par W3C :
dans une autre fenêtre
ou
dans un autre onglet
pour pouvoir valider régulièrement.
Exo 1-1 : structure type avec un titre
Exo 1-2 : la rédaction des pages ci-dessus sur le cours 1, correspond à cet exercice
Exo 1-3 : taille, police, mise en forme, liste, titre
Exo 1-4 : même travail que exo1-3, exo perso
HTML 2 : Couleurs, liens et insertion d'images
2-1 Les couleurs
2-2 Les liens
2-3 Les images
Exo 2-1 : code hexadécimal des couleurs
Exo 2-2-1 : alignement de l'image et du texte
Exo 2-2-2 : une image en arrière plan
Exo 2-3 : image mappée
Exo 2-4 : couleurs des liens : actif, visité ou non visité
Exo 2-5 : image mappée et liens internes
HTML 3 : Travaux pratiques 1
Le cours 3 a pour objectif de faire le point sur les notions enseignés dans les cours 1 et 2. Il s'agit en fait d'un exercice où il faut rédiger un CV. La mise en forme et le contenu son libre. Seule contrainte : 5 pages à construire et à relier entre elles.
Exo 3
Hors cours : un point sur les balises block et inline
Le developpeur-web
Alsacréations
CSS faciles
En XHTML, seules les balises bloc peuvent contenir des balises en ligne. Les balises block génèrent des passages à la ligne.
Hors cours : certaines balises sont porteuses de sens et jouent un rôle pour l'accessiblilité d'un site pour les non ou mal-voyants et leurs synthèses vocales. Cf Web accessibilité initiative (WAI)
Accessibilité du web par wikipédia
WAI ARIA : une norme du W3C
Une traduction en français
Une réflexion sur l"accessibilité et l'html5
A COMPLETER
HTML 4 : Feuilles de style
4-1/4-2 Feuilles de style : rôles, sélecteurs
4-3 Intégration CSS
4-4 Classes
4-5 Propriétés CSS : des détails
Et tout d'abord l'essentiel avec le memento du siteduzero
4-6 Zones de texte : div et span
4-7 Validation du css par W3C :
dans une autre fenêtre
ou
dans un autre onglet
pour pouvoir valider régulièrement.
A noter que le validateur W3C pour le CSS essaie de deviner la version utiliser (elle n'est pas déclarée). En fait, cette notion de version n'est pas très stricte. Il est conseiller d'utiliser les propriétés dont on a besoin et de vérifier si les navigateurs, les plus utilisés, les interprétent.
Exo 4-1-1 : intégration interne du style
Exo 4-1-2 : intégration externe du style
Exo 4-2 : positionnement et style
Exos 4-3 Tétris (positionnement relatif de boîtes (div) et une marge extérieure à gauche :
4-3-1 Images dans des div emboîtées
4-3-2 Images dans des div successives
HTML 5 : Les tableaux et les cadres/frames
5-1 Les tableaux et leurs mises en forme
5-2 Cadre, frame ou fenêtre
5-3 Evolution dans la structure des pages Web
5-4 Un exemple d'iframe
Exo 5-1 Tableau : défintion hauteur et largeur et aussi bordure et sa correction
Exo 5-2 Tableau : 2 colonnes, du texte et des images et sa correction
Exo 5-3 Tableau : mise en forme par feuille de style et sa correction
Exo 5-4 Tableau : fusions de cellules et sa correction
Exo 5-5 Cadre-Frames : superpostion et imbrication et sa correction
Démonstration : mise en forme d'une tableau en CSS et comparaison d'une mise en forme par tableau et par div
HTML 6 : Les formulaires
6-1 Formulaire et balise form
6-2 Formulaire mailto
6-3 Les champs texte et leurs sélections(cases à cocher/boutons radio)
6-4 Menu déroulant et exo 6-3, select simple ou multiple
Exo 6-1 Formulaire : mot de passe et essai de mailto
Exo 6-2 Formulaire : checkbox et radio
Exo 6-4 Formulaire : inscription ou la reprise de toutes les notions de formulaires
HTML 7 : Travaux pratiques 2
Exo7, et sa correction
HTML5 et CSS3 par le site du zéro
PHP
Quelques sites de cours PHP
Le PHP par
comment ça marche,
le site du zéro
,
polytechnique, et
L'altruiste
Première page d'exercices PHP (exo1-1 à exo1-4) : écrire des scripts PHP pour afficher une ligne de textes, 3 paragraphes, 2 paragraphes en PHP séparés
par un paragraphe en HTML et enfin deux paragraphes contenus chacun dans deux chaînes différentes et n’utilisant qu’une seule commande echo.
Deuxième page d'exercices PHP (exo1-5 à exo1-9) : Ecrire des scripts générant le titre du document, un script Javascript affichant une boite alert, et
un autre permettant l’inclusion d’une page HTML, un réalisant l’inclusion d’un fichier HTML contenant un script Javascript générant une boite alert, et enfin, un script PHP réalisant
l’inclusion d’un autre script PHP.
Première page d'exercices sur les variables en PHP (exo-2-1 à 2-4) : Ecrire des scripts pour :
- Deux variables : calcul somme et affichage des valeurs des variables et de la somme;
- Echange de valeurs de variables numériques;
- Initialiser un tableau;
- Somme des éléments d'un tableau;
Deuxième page d'exercices sur les variables en PHP (exo-2-5 à 2-8) : Ecrire des scripts pour :
- Découpages d'une chaîne de caractères;
- Concaténation de deux chaînes de caractères;
- Remplacement de caractères;
- Longueur d'une chaîne de caractères;
Première page des exercices sur les éléments de contrôle en PHP (exo3-1 à exo3-4) :
Ecrire des scripts pour :
- Structures alternatives :
* déclarer une variable et déterminer si elle est supérieure ou inférieure à 10 au moyen de if, if ... else
et afficher un message différent en fonction de la réponse pour informer;
* Déclarer une variable et au moyen de switch...case; afficher un message différent pour chaque
valeur possible de cette donnée;
- Structures itératives :
* boucle while : déclarer et afficher un tableau;
* boucle for : déclarer et afficher un tableau.
Deuxième page des exercices sur les éléments de contrôle en PHP (exo3-5 à exo3-9) :
Ecrire des scripts pour :
- générer un tableau contenant les tables de multiplication de 1 à 10 tout d'abord avec une boucle while puis avec une boucle for;
- générer une table de multiplication où les multiples de 2, de 3, de 5 et de 7 auront une couleur particulière;
- tester un nombre au moyen d'une boucle pour savoir si il est premier;
- afficher tous les nombres qui divisent un nombre;
- afficher la liste des facteurs premiers d’un nombre, c’est à dire la liste de ses diviseurs premiers.
Première page des exercices sur les éléments de contrôle en PHP (exo4-1 à exo4-6)
Deuxième page des exercices sur les éléments de contrôle en PHP (exo4-7 à exo4-11) :
Exo 5-1-1PHP : Un formulaire HTML d'un champ texte à un script php pour l'afficher avec la méthode POST
Exo 5-1-2PHP : Un formulaire HTML d'un champ texte à un script php pour l'afficher avec la méthode GET
et leurs corrections
Exo 5-2PHP : Un formulaire HTML d'un champ texte associé à un script php pour le tester
et sa correction
Exo 5-3PHP : contrôle code d'accès, et
la correction
Exo 5-4PHP : Chaque bouton radio associé à un texte, et
la correction
Exo 5-5PHP : Des boutons checkbox associés à des textes et
Le fichier php associé en format txt,
et
la correction
Exo 5-6PHP : Menu déroulant à choix unique avec textes associés.,
et
la correction
Exo 5-7PHP : Menu déroulant à choix multiple avec textes associés.,
et
la correction
Exo 5-8PHP : Récapitulatif sur les formulaires.,
et
la correction
Les fichiers en php par comment ça marche
Exo6-1 : Les fichiers du répertoire courantet
sa correction
Exo6-2 : Lister les fichiers d'un répertoire choisi via un formulaireet
sa correction
Exo6-3 : Lister les fichiers d'un répertoire choisi via un formulaireet
sa correction
Exo6-4 : Affichage d'un fichier et
sa correction
Exo6-5 : et
sa correction
Exo6-6 : et
sa correction
Exo6-7 : et
sa correction
Exo6-8 : et
sa correction
Exo6-9 : et
sa correction
Pour avancer
Travaux réalisés en html et PHP
Référencement dans les moteurs de recherche
Site et reseau sociaux
Protéger un site web en construction
Logithèque
Les logiciels préférés des français
Les systèmes d'exploitation
Je travaille principalement sur WindowsVista ou sur Linux Ubuntu. J'adhère à la philosophie des logiciels libres et les utilise
en priorité. Lors de cours à l'école des beaux arts de Quimper, j'ai travaillé sur Mac.
Windows
Mac OS
Linux
Les logiciels de sauvegarde
Quel que soit le domaine de l'informatique, il est question de fichier. Toutes nos productions numériques (dessin, son, photo, vidéo, ..) sont des fichiers.
Par ailleurs, on sait aussi que le matériel informatique est fragile.
Il est donc indispensable d'avoir toujours plus d'un enregistrement des fichiers produits. Il est important donc de sauvegarder le plus régulièrement possible les fichiers produits.
Sur certains ordinateurs comme le mac, la sauvegarde est automatique. Ce n'est pas le cas sur les pc sous windows ou linux.
Les logiciels portables sur clés USB pour Windows
Les logiciels ainsi installés sur une clé USB ont différents avantages. Ils peuvent être utilisés sur différents ordinateurs. On se déplace
avec sa boîte à outils. Ils permettent, peut-être, aussi d'avoir moins de problèmes liés aux registres.
A ma connaissance, il existe deux logiciels pour "créer" de telles clés USB :
framakey et
liberkey
On peut télécharger des applications portables sur les sites suivants :
portableapps.com,
pendriveapps.com
et framakey
Des outils pour créer des pages web : 2 méthodes possibles : ecrire le code ou utiliser un des outils graphiques
Des éditeurs de texte
Des informations sur le choix d'un éditeur web
Des logiciels : Notepad++ et bluefish
Des outils graphiques
KompoZer
Le tutoriel de josar
Des outils pour créer des pages : des logiciels pour un serveur local pour pouvoir lire le code saisi
WAMP et
EasyPHP
Des outils pour présenter des photos
Les propositions de simpleviewer
Des navigateurs web
Des clients FTP
FileZila
Images : photos, dessin pixel, dessin vectoriel, dessin par programmation
Photo et dessin pixel :
Gimp une documentation
Dessin vectoriel
Dessin par programmation
Dans ce domaine, un seul logiciel connu : Processing dont voici des sites à consulter :
Sa présentation sur wikipédia
, son site,
un manuel en ligne par flossmanuals,
les cours de l'école d'Art d'Aix en Provence,
et ceux du site "mon-club-elec".
Processing utilise Java. Par conséquent pour que les créations via processing soient lisibles sur le web par tous (sans avoir avoir à installer le plug-in java),
il est donc préférable de les transformer en javascript en utilisant ProcessingJS.
Le site ProcessingJS
Des précisions sur ProcessingJS
Comment installer ProcessingJS
Le site du créateur de ProcessingJS
Un site collaboratif sur Processing
Sketchpad
Animation
Voir les informations sur Processing.
Vidéos
Le scanner
Pour traiter de vieilles photographies, il faut un matériel adapté, c'est à dire de la gamme professionnelle. En effet, le problème majeur avec ce type d'images, ce sont leurs imperfections, les rayures, les dégâts qu'elles ont pu subir. Dans la mesure du possible, il est donc souhaitable de travailler à partir de la source de l'image c'est à dire les négatifs ou les dispositives, à condition qu'elles soient en meilleur état que la photopgraphie.En effet, en travaillant à partir de la source, on évite aussi la perte de définition, de qualité. La distorsion quoi!
Le scanner est un outil indispensable pour le traitement de l'image. Il faut y associer un logiciel d'image comme Gimp, Paint ou Photoshop element.
Pour apprendre à utiliser ce matériel et ces logiciels, le plus économique et efficace, à mon sens, sont les tutoriels disponibles sur le net et aussi les échanges avec des amis, des collègues ou au sein d'un club.
La numérisation et le choix de la résolution et de la couleur (niveau de gris, couleur...) dépend de l'emploi de l'élément numérisé. Par exemple, pour du bouquin d'art il est conseillé de scanner en 600 dpi, pour l'imprimerie en 300, pour me web en 72.
La résolution dépend de l'emploi de l'élément numérisé, certes en qualité (livre d'art, journaux, web..) mais aussi en dimension. En effet, si on souhaite utiliser l'image scanner pour pouvoir en faire une immense affiche, il est alors souhaitable de scanner avec la résolution maximale.
Où acheter du matériel informatique d'occasion : monpcpascher.com par exemple.
