Differences

This shows you the differences between two versions of the page.

--- 2016_2017:s1:webdoc:td1 [2016/10/18 07:50] – [Un peu de vocabulaire] logre
+++ 2016_2017:s1:webdoc:td1 [2016/10/27 07:19] (current) – [Présentez-vous] logre
@@ Line 1: / Line 1: @@
 ===== <TD1> xHTML, une affaire de balises </TD1> =====
+** Toutes les questions du TD sont à répondre dans un document xHTML validé qui contiendra les noms et prénoms du binôme.
+Ce fichier de réponse et votre page perso seront à déposer sous Jalon, la veille au soir du prochain TD au plus tard.**
@@ Line 20: / Line 23: @@
 Au sein du navigateur, pensez à utiliser la console du développeur web.
+===== Un peu de vocabulaire =====
+//Internet// : le **réseau** mondial qui permet d’échanger de l’information **entre ordinateurs ou objets connectés** grâce à des **protocoles applicatifs** comme HTTP (Web), SMTP (e-mail) ou FTP (fichiers) supportés par le protocole réseau Internet Protocol (IPv4 ou IPv6).\\
+//Web : World Wide Web (WWW)//, communément appelé le Web, est un système hypertexte public fonctionnant sur Internet. Le Web permet de consulter, avec un navigateur, des pages accessibles sur des sites grâce au protocole HTTP. Il n’est qu’une application d’Internet, au même titre que l’e-mail.
+Les ordinateurs constituant Internet prennent le rôle de clients ou de serveurs, respectivement s'ils envoient des requêtes à de l'information ou s'ils y répondent.
+Un ordinateur a besoin de pouvoir gérer les transactions HTTP pour appartenir au Web.
+Un ordinateur connecté à Internet à une adresse //IP (Internet Protocol)//.
+Pour lire les documents qui se trouvent sur un autre ordinateur, il faut sur notre ordinateur client aussi un logiciel appelé client web.
+Les //navigateurs// (Chrome, Firefox, Internet Explorer) jouent ce rôle sur le web.
+<note important>Ces définitions simplifiées seront étayées dans les différents modules abordant le réseau, la programmation web, etc.</note>
 ===== Mon premier exemple =====
@@ Line 182: / Line 209: @@
 </box>
-==== Images d'arrière-plan  ====
-Voici comment positionner des images en arrière-plan :http://www.w3schools.com/css/css3_backgrounds.asp
-Par défaut, l'image se place dans le coins en haut à gauche puis se reproduit horizontalement et verticalement, pour remplir tout l'espace.
-Pour qu'une image ne se répète pas mettez la valeur ''no-repeat''
-En savoir plus/mieux:
-  * http://www.alsacreations.com/tuto/lire/808-arriere-plans-css3-background.html
-  * http://www.alsacreations.com/tuto/lire/1353-etape-3-couleurs-images-de-fond.html
@@ Line 203: / Line 220: @@
   * A quoi sert l'attribut alt? Mettez un nom erroné d'image, et re-testez.
   * Si vous ôtez cet attribut, votre fichier est-il toujours valide?
-  * Si vous ne l'avez pas encore fait placer l'image dans un répertoire ''/images'' au même niveau que le répertoire ''TD1'' (sous WEB), puis référencer l'image de manière relative par rapport au répertoire où vous vous situez.
+  * Si vous ne l'avez pas encore fait, placer l'image dans un répertoire ''/images'' au même niveau que le répertoire ''TD1'' (sous WEB), puis référencer l'image de manière relative par rapport au répertoire où vous vous situez.
-  * Placer une image en arrière-plan.
 </box>
@@ Line 214: / Line 231: @@
 ===== Liens =====
-Les liens, ou ancre, ou hyperliens, sont la principale originalité initiale des documents hypertextes, dont ils tirent leur nom.
+Les liens, ou ancres, ou hyperliens, sont la principale originalité initiale des documents hypertextes, d'où ils tirent leur nom.
 Une ancre est notée <a>...</a> et l'attribut href vous permet de fournir l'url de la page liée.
 Ils permettent la redirection ou l'ouverture d'une nouvelle fenêtre au clic, via du texte ou une image, ou le téléchargement d'une ressource.
@@ Line 356: / Line 373: @@
 Vous devez réaliser votre page web.
-Nous l'améliorerons par la suite et surtout nous la mettrons en ligne.
+Vous l'améliorerez par la suite et la rendrez accessible en ligne.
 [[http://www.w3.org/TR/html5/text-level-semantics.html#the-cite-element|Pour en savoir plus sur les balises]]
 <box round rgb(185,211,238) 95%|**A Faire :**  >
-  * Créer un fichier sous ''WEB'', ''index.html'', il contiendra votre page personnelle. Puisque vous travaillez peut-être à deux sur la même machine, un seul fichier est créé par binôme. Mais au prochain TD, vous devrez construire éventuellement par copier/modifier la page du deuxième membre du binôme.
+  * Créer un fichier sous ''WEB'', ''index.html'', il contiendra votre page personnelle. Si vous travaillez en binôme, pensez à prendre le temps de copier/adapter la page pour avoir chacun la sienne. (La note de TD sera **individuelle**).
 Pour l'instant, votre page doit contenir au moins les éléments suivants :
   * structurer votre page en utilisant des titres de niveaux différents : ''<h1>'' … ''</h1>'' à ''<h6>'' … ''</h6>'' le plus petit, non obligatoire, mais au moins deux niveaux doivent être utilisés.
-  * Sauter une ligne : ''<br />''
+  * Sauter une ligne : ''<br />'' pour voir ce que ça fait. Puis effacez la vite. Réfléchissez à pourquoi.
   * Tracer une ligne horizontale : ''<hr />''
   * Insérer des commentaires : ''< !- - Ceci est un commentaire - - >'' (attention pas d'espace entre les tirets!!)
   * Utiliser des listes
-  * Un tableau
   * Insertion d’image
   * Des liens vers :
-        * Vers un fichier (votre CV, si vous l'avez déjà fait, sinon un fichier contenant pour l'instant uniquement nom et prénom)
+        * Vers un fichier : l'export PDF de votre CV
         * Vers votre adresse email : <code html> <a href="mailto:toto@unice.fr">Ecrire à toto</a></code>
   * Et tout ce qui vous amuse et vous semble utile.
-  * N'oubliez pas de faire une archive de votre environnement, puis respectez les contraintes de rendu données
+  * N'oubliez pas de faire une archive de votre environnement, puis respectez les contraintes de rendu données.
   * Si vous pensez que d'autres questions à la rubrique suivante peuvent être ajoutées, envoyez les dans un fichier joint "jeSaisAussi".
 </box>
+Voici un petit exemple de présentation utilisant des balises de type Block.
+{{ :2016_2017:s1:webdoc:block-example.png?nolink&300 |}}
 =====  Rendre votre page web accessible depuis l'extérieur =====
@@ Line 385: / Line 404: @@
-<note tip>**Pour rendre votre page web accessible depuis l'extérieur**
+<note tip>**Pour rendre votre page web accessible depuis l'extérieur** </note>
-  * Vous êtes sur Sophia ou sur Nice : Vous devez déposer vos fichiers web sur ''lindmz.unice.fr'' dans un dossier ''web'' à la racine de votre répertoire personnel sur ce serveur : (putty->linserv1) et modifier les droits (chmod 755)
+**Vous êtes sur Sophia ou sur Nice :**
+Vous devez déposer vos fichiers web sur ''lindmz.unice.fr'' dans un dossier ''web'' à la racine de votre répertoire personnel sur ce serveur : (putty->linserv1) et modifier les droits (chmod 755)
          * Accès extérieur via http://lindmz.unice.fr/users/etudiant/n/nomIdentifiant/web
          * Accès local via http://linserv1/users/etudiant/n/nomIdentifiant/web/
-  * Vous êtes sur Sophia
+**Vous êtes sur Sophia :**
 Pour vous connecter sur ce serveur, en ligne de commande, utilisez ''ssh'', puis créez le dossier:
 ''mkdir web'' ou utilisez ''putty''
@@ Line 403: / Line 425: @@
 Retourner sur http://lindmz.unice.fr/users/etudiant/a/alt01/web/ pour vérifier que son contenu apparaît.
 Si tout fonctionne, vous pouvez transférer vos fichiers à l'aide de ''Winscp''.
+**Si cela ne fonctionne pas :**
+Ouvrez le logiciel ''FileZilla'' présent dans le répertoire réseau ''R:'' : il s'agit d'un client FTP, un logiciel capable de se connecter à un serveur en utilisant le protocole FTP, afin de transférer des fichiers.
+Renseignez les informations suivantes :
+  * Hôte : linserv3
+  * Login : votre identifiant
+  * Password : votre mot de passe
+  * Port : 22
+Lancez la connexion, vous devriez voir des répertoires dans site distant.
+Créez un dossier ''web'' (clic droit dans Site distant, puis Créer un répertoire), ouvrez le et transférez les pages du dernier TD dedans.
+Vous devriez pouvoir y accéder au sein de l'université à partir de l'adresse suivante : http://linserv1/users/etudiant/n/nomIdentifiant/web/ où **nomIdentifiant** correspond à votre identifiant.
+L'accès est également possible de l'extérieur à partir de cette adresse : http://lindmz.unice.fr/users/etudiant/n/nomIdentifiant/web
- </note>
 ===== Je sais répondre à =====