STIC Discussion:STIC I - exercice 1 (Stella)

De EduTech Wiki
Aller à : navigation, rechercher

Sommaire

1 Testez ici si c'est la première fois -- Daniel K. Schneider 24 septembre 2009 à 17:12 (CEST)

L'oiseau bleu est rouge !

1.1 Re: Testez ici si c'est la première fois -- Daniel K. Schneider 24 septembre 2009 à 17:12 (CEST)

Pff même pas vrai !

1.2 -- Oanaannemary 25 septembre 2009 à 10:11 (CEST)

voilà mon premier essai

1.3 Re: Testez ici si c'est la première fois -- Loic.boujol 30 septembre 2011 à 09:16 (CEST)

Test

2 W3Schools -- Roberto R 25 septembre 2009 à 23:55 (CEST)

For my own, I recommend the W3Schools Web site [1] , which is a comprehensive tutorial (theory and examples) of all the needed Web technologies (and many more!). But in English, of course...

2.1 Re: W3Schools -- Daniel K. Schneider 26 septembre 2009 à 11:49 (CEST)

oui ce site est très populaire parmi les staffies et maltties et il y a des très bon tutoriels. Pour ceux/celles qui ne peuvent pas encaisser la pub:

... et c'est plus beau (ceci dit il existe d'autres w3school beautifiers ... et comme ces sites savent que les experts installent des scripts pour éliminer leur pub, ils changent souvent le code. Donc faut réinstaller ou trouver un autre de temps à autre). Pour infos sur les user-side scripts: lire en:User-side JavaScript

Note: Le tutoriel sur XSLT n'est pas bon (utilise des boucles quand c'est totalement inutile ....).

A part cela: Il existe des versions wiki des transparents que j'ai utilisé dans le cours (voir chaque page exercice). Et je rappelle: Le présentiel ne sert qu'à vous montrer un peu la logique générale + les outils. Avant de se plonger, faut absolument lire un texte !!! (soit transparents, soit wiki tutoriels, soit qc. ailleurs comme w3schools etc.)

3 Pixel: Problèmes à démarrer -- Sugarch0 30 septembre 2009 à 16:41 (CEST)

Après avoir chargé différentes applications, je sais maintenant après qques tâtonnements ouvrir un fichier dans le browser ET PSPad et créeer une structure html. J'ai mis ma photo dans le fichier mais pas plus, j'ai compris comment mettre le fichier sur le serveur tecfa et qu'il faut pour que le browser le trouve terminer le nom du fichier par welcome ou index.html.(merci Louiselle). Mon but est de maîtriser les liens vers le fichier et je ne trouve pas beaucoup d'infos sur le <head>. Je croche ici parce que je n'arrive pas, si je passe par Tecfa people, à arriver directement sur le fichier, il me montre le parent directory, le fichier et la photo et je dois recliquer. Même en changeant l'adresse html, ca ne marche pas....J'ai lu les pages d'aide et fait des exercices mais là ca bloque.

PS J'espère que j'aurai un bonus pour permettre à d'autres de m'expliquer, je suis une souce de bonus...reconnaissante!

3.1 Re: Pixel: Problèmes à démarrer -- Daniel K. Schneider 30 septembre 2009 à 21:25 (CEST)

Il y a une simple chose à réparer:

Votre fichier doit s'appeler welcome.html (mais pas WelcomeAviva.html). L'informatique c'est très mécanique et on a configuré nos serveurs pour que welcome.html etc. vont s'afficher automatiquement quand on affiche le répertoire. Donc faut renommer le fichier

Louiselle vous a donnée la bonne solution, mais il faut l'appliquer ...

Sinon, je vous conseille de tjrs utiliser des minuscules pour tout nom de fichier. C'est plus simple à taper. Ceci dit: pour le welcome.html c'est obligatoire car pour la machine un W n'est pas égal à un w.

Pour finir: pas de bonus pour l'exercice, celui-ci on l'obtient en participant à la rédaction dans le Wiki, désolé (relire l'enoncé). Par contre, si vous continuez à poser des questions, cela fera un bonus à la fin du cours pour "participation" (relire: Evaluation :)

PS:

  • Je n'ai pas compris la question concernant le "head".

Voici la liste des fichiers "index" possible. Donc index.html, index.htm, welcome.html et welcome.htm feraient votre affaire.

index.html
index.htm
welcome.html
welcome.htm
index.php
welcome.php

4 Question sur le point 4.5. de l'intro à XHTML "configuration du serveur" -- Sugarch0 6 octobre 2009 à 15:28 (CEST)

Que veut dire IE explorer 6 et comment savoir si mon serveur privé a la bonne configuration?

Aviva 6.10.09

4.1 Re: Question sur le point 4.5. de l'intro à XHTML "configuration du serveur" -- Daniel K. Schneider 6 octobre 2009 à 15:38 (CEST)

  • IE6 est le navigateur de Microsoft - version 6 (on est à la version 8 maintenant, mais ce navigateur n'encaisse toujours pas XHTML). En fait j'aurais du écrire soit "IE6", soit "Internet Explorer 6"
  • Vous n'avez pas de server chez vous, donc ce n'est pas un problème. Le serveur à utiliser pour les travaux est à TECFA et configuré par nous...

Maintenant en ce qui concerne le fond de votre question: Ignorez pour le moment la section 4.5, car je vous demande seulement de produire un fichier XHTML servi en tant que HTML, donc votre fichier doit s'appeler welcome.html et pas welcome.xhtml. On verra du "vrai" XHTML plus tard.

5 CSS style sheet -- Sugarch0 8 octobre 2009 à 12:13 (CEST)

Bonjour!

Après avoir regardé les exemples et les tutorials J'ai créé un mimi stylesheet pour ma page welcome de tecfa (et evtl de futures autres pages) et j'ai mis le lien vers le fichier CSS deopuis le fichier welcome mais la page ne change pas. que se passe-t-il? Le fichier css et le fichier xml pour la page welcome sont sur le serveur sous perso/maltt/sugarch0....

5.1 Re: CSS style sheet -- Daniel K. Schneider 8 octobre 2009 à 14:22 (CEST)

Le lien est faux c'est pourquoi....

http://tecfaetu.unige.ch/tecfa/web/perso/maltt/sugarch0/ASCwelcome.css

Donc soit l'appeler href="ASCwelcome.css", soit enlever le "web" (y a pas de répertoire web dans le répertoire web, le server est dans le répertoire web.

Tip: La prochaine fois, simplement regarder si le lien CSS marche, donc le copier et coller dans le navigateur.

6 Format de rédaction des rapports -- Claire Peltier 21 octobre 2009 à 15:16 (CEST)

Bonjour,

Sous quel format souhaitez-vous les rapports ? Word ?

Merci pour votre réponse.

Claire

6.1 Re: Format de rédaction des rapports -- Daniel K. Schneider 21 octobre 2009 à 15:37 (CEST)

Non pas avec un traitement de text, PDF etc. Il doit être en HTML ou XHTML et placé au bon endroit avec un bon nom, par ex:

/etu-maltt/pixel/dupond/stic/ex1/welcome.html

J'ai rendu le descriptif de l'ex plus explicite à ce sujet ....

7 Home Page Edutech Wiki -- Gur 21 octobre 2009 à 19:13 (CEST)

Nous avons deux Home Page sur Edutech Wiki, une en anglais et une en français. Devons-nous mentionner les deux dans notre rapport pour faire part de nos contributions? Monique Gur

7.1 Re: Home Page Edutech Wiki -- Daniel K. Schneider 21 octobre 2009 à 19:28 (CEST)

Non, aucune des deux fait partie de l'exercice. Toutefois, c'est tjrs bien d'intégrer ce qu'on fait. Genre les mentionner dans votre rapport ou encore faire un lien depuis votre home page normale....

8 Question page publique -- Claire Peltier 21 octobre 2009 à 20:11 (CEST)

J'ai déjà une page sur Netvibes que j'utilise tous les jours. Toutefois, comme il y a l'accès à mes comptes de messageries, je ne souhaite pas la partager. Puis-je faire une capture d'écran pour valider l'exercice ? Avez-vous une autre suggestion ?

Merci.

8.1 Re: Question page publique -- Daniel K. Schneider 22 octobre 2009 à 00:52 (CEST)

Vous pouvez tout à fait faire une 2ème page destiné au public dans Netvibes et juste publier celle-là. En plus cela vous permet de mettre juste ce qu'il faut ... Il faut voir dans pages->add a page.


9 Contribution au wiki -- Claire Peltier 21 octobre 2009 à 20:37 (CEST)

Encore moi...

Je suis un peu dépitée...j'ai regardé les sujets présents dans Edutechwiki et, en l'état, je ne me sens absolument pas compétente pour y apporter des éléments supplémentaires. J'imagine que ça viendra au fil de la formation...

Que me conseillez-vous ?

9.1 Re: Contribution au wiki -- Daniel K. Schneider 22 octobre 2009 à 01:01 (CEST)

Priorité absolue: faire des déjà les exercices 2 et 3 ! Ensuite, vous pouvez toujours contribuer quelque chose. C'est une erreur de croire qu'il faut "de la formation" pour contribuer. En plus il y a des sujets où vous êtes déjà experte, genre tout ce qui touche aux bibliothèques. Donc je ne vous demande pas de compléter forcément des sujets qui y sont déjà. Comme source d'inspiration pour vous, à la limite edutech wiki anglais, mais certainement pas la version française. Il faut comprendre cet exercice comme un acte d'apprentissage. Vous pouvez tout à fait vous baser sur tout les ressources ques vous voulez. Même copier/coller une grande partie (à condition que le copyright le permette). L'idée est que écrire + arranger = apprendre quelque chose et finalement je ne jugerai pas la qualité d'un article fini, mais une contribution initiale et utile.

PS: Faire un mini-minium est tjrs mieux que rien faire (un autre conseil).

10 placer des DIV précisément sur une page html avec la SS -- Lucie.Marchon 3 octobre 2010 à 21:04 (CEST)

J'ai de la peine à comprendre comment placer des div autrement que les uns au-dessus des autres de la même largeur tout le temps.

J'ai copié cela dans ma feuille de style, que j'ai récupéré dans une version de zen-garden:

        #cote {
               clear:both;
               margin: 20px 20px 20px 10px; 
               width: 160px; 
               float: left;
              }

et j'espérais avoir un <div> placé autrement avec

        <div id="cote">
            <p>texte
            </p>
         </div>

sur la page html.

Mais non, il reste entassé sur les autres. Qu'est-ce qu'il y a qui ne va pas? Est-ce que c'est simplement possible de placer un <div> qui soit un peu "flottant", qui traverse d'autres zones, d'autres <div>?

(je crois que j'ai supprimé la réponse sans faire exprès, il s'agissait de faire varier les positions relatives et absolue des boîtes... )

Merci. Je vais faire des essais en variant ces paramètres pour essayer de maîtriser la place qu'auront mes boîtes dans ma page... Et en effet, ça marche très bien.

10.1 Re: placer des DIV précisément sur une page html avec la SS -- Daniel K. Schneider 3 octobre 2010 à 23:48 (CEST)

[Voici l'ancienne réponse recopié ...:) ]

Effectivement une boite flottante est juxtaposée à la boite précédente d'abord horizontalement, ensuite verticalement s'il n'a plus de place. Une boite peut être alignée soite à gauche, soit à droite.

Maintenant l'alternative c'est de les positionner de façon absolu. Avez-vous essayé ? Voir: http://tecfa.unige.ch/guides/tie/html/css-intro/css-intro-7.html et les exemple attachés pour un exemple simple .... personnellement je fais cela tellement rarement que je devrait aussi chercher un moment avant de trouver un design qui marche. Il est facile de faire soit flottant, soit fixe (absolu), mais mélanger les 2 est plus dur.

Pour finir, dans un desin sophistiqué il faut faire des boites dans des boites dans des boites .... Une boite dans une boite se positionne par rapport à la boite parente.

Pour finir: N'importe quel élément se positionne. Donc si vous lisez d'autres CSS faites attention à tout positionnement !! Ce qui distinque le "div2 du "p" par exemple est uniquement le fait que le div n'a aucun style associé au départ.

11 rendus de page complètement différents selon le navigateur!! -- Lucie.Marchon 4 octobre 2010 à 09:13 (CEST)

J'ai publié une première version de ma page et il se passe quelque chose de bien ennuyeux. Hier, le rendu était parfait avec opéra, safari ne gérait pas le style alternatif et firefox n'affichait rien à part le titre. Aujourd'hui, et sans aucune modification, safari affiche la page correctement, opera ne gère plus les changements de style et firefox n'affiche toujours rien. Est-ce que ceci est un problème dont on peut espérer identifier les causes? Est-ce que ceci fait la même chose avec vos navigateurs? A quoi devrais-je faire attention pour éviter cela?

11.1 Re: rendus de page complètement différents selon le navigateur!! -- Daniel K. Schneider 4 octobre 2010 à 10:27 (CEST)

Première chose à faire: valider à la fois le HTML et le CSS !

Sinon, il existe aussi une extension.

S'il y a des erreurs, l'affichage est aléatoire. Essayez d'abord cela, puis revenir si votre code semble être correct.

A lire éventuellement:

11.1.1 Re: Re: rendus de page complètement différents selon le navigateur!! -- Lucie.Marchon 4 octobre 2010 à 10:52 (CEST)

Le html était déjà correct, j'avais utilisé l'extension firefox installée en cours. Par contre, les feuilles de style crées par KompoZer (j'ai renoncé à l'utiliser tellement il y avait de bugs) l'étaient sans nom d'extension. Je l'ai rajouté. Les pages feuilles de styles semblent bonnes. Maintenant, la page fonctionne bien avec Safari et Opéra, mais il n'y a que l'image de fond qui apparaît sous firefox.

11.1.2 Re: Re: Re: rendus de page complètement différents selon le navigateur!! -- Daniel K. Schneider 4 octobre 2010 à 12:23 (CEST)

Dans ce cas, il faut déposer le tout sur notre serveur pour qu'on puisse voir. Et donner le lien ici. Il peut avoir 2 types de problèmes (au moins):

  • Vous utilisez une feature qui n'est pas implémenté dans FireFox
  • Le valideur n'a pas détecté une erreur plus subtile

11.1.3 Re: Re: Re: Re: rendus de page complètement différents selon le navigateur!! -- Lucie.Marchon 4 octobre 2010 à 21:15 (CEST)

J'ai fait des essais, et il me semble que c'est la ligne qui amène un petit peu de javascript pour changer de feuille de style qui coince sous firefox:

       <script type="text/javascript" src="styleswitcher.js" />

Je le dépose quand même si vous pensez pouvoir m'aider..

11.1.4 Re: Re: Re: Re: Re: rendus de page complètement différents selon le navigateur!! -- Daniel K. Schneider 5 octobre 2010 à 09:43 (CEST)

la ligne est correcte, mais il peut y avoir des erreurs dans le code JavaScript, enfin cela ne devrait pas toucher l'affichage par défaut en principe. Enfin il faut absolument afficher la console JavaScript et regarder les erreurs:

  • Outils->Console d'erreurs (approximativement, je n'ai pas de FF en français)

A part cela:

  • Si vous n'utilisez pas ce script styleswitcher.js il faut enlever cette ligne !
  • Si vous avez des feuilles de style multiples, vous pouvez aussi les choisir manuellement. Menu: View->Page Style (enfin équivalent en français).