Lancement de l'Académie Prog HFR !
 
Reprise de la présentation faite dans la section Maya de l'Académie :

Les professeurs de l'Académie Prog HFR :
Suri
Ultra Bestial
 
- Les cours -
Let's rock
cours 1 : xhtml/Css statique
Tp: monter sa maquette en xhtml/css
note de Mad Fenston : il serait peut-être judicieux de commencer par les cours de webdesign.
 
cours proposés par Suri en l'état. Merci à lui.
 
 
Merci de ne poster que des images de moins de 800 pixels pour le plus grand côté et de moins de 150ko. Autrement, il serait sympa de ne mettre qu'un lien.

Questions :

• pourquoi xhtml/css ? Enfin, pourquoi pas en html ?

Suri
 

• Et puis comment être sûr que Dreamweaver sort ça ? Et puis ça me servirait à quoi de le savoir ?

Dreamweaver n'est pas encore capable de sortir du xhtml/css propre: http://incongru.webdynamit.net/LogicielsWYSIWYG Suri
 

• Vaut mieux utiliser un logiciel ou peut-on monter cette maquette "à la main" ?

le "must" reste la compréhension de chaque ligne de texte de la partie xhtml et de la partie CSS, et pour ca un notepad evolué (avec coloration syntaxique c'est toujours utile) fait l'affaire Suri
 

• Quelle est la différence entre <div class=""> et <div id=""> ?

http://www.publishtogether.com/pompeurs/FaqHtmlIdClass Fastclemmy
 

• Comment déclare-t-on le style de la page ?

http://www.cybercodeur.net/weblog/ [...] x.html#css Voir notamment Les différentes méthodes pour appliquer CSS Fastclemmy http://incongru.webdynamit.net/DeclarerDesStyles Simogeo
 
Trucs et astuces :
 
Liens utiles :

• http://forum.hardware.fr/hardwaref [...] -26941.htm (et liens present ds le debut du topic). Jpense que le mieux c de poser la question ici et la bas, et de mettre la reponse ds le topic ds le topic dans lequel la question n'aura pas été repondue (donc ici le plus souvent ) Suri

• Le listing des logiciels sur Prog :

http://forum.hardware.fr/forum2.ph [...] 471&cat=10 Fastclemmy
 

• Et un topic sur jEdit :

http://forum.hardware.fr/forum2.ph [...] 641&cat=10 Fastclemmy
 

• La sémantique :

http://incongru.webdynamit.net/LaSemantique Simogeo
http://websemantique.org/ReperePointDepart Simogeo
http://websemantique.org/Principes [...] Semantique Simogeo

ah ben bon bah salut

en gros ici on va apprendre a faire un site web les enfants (statique au debut, puis dynamique si ca vous interesse)

T'as déjà un élève assurément.

Spa évident ce qui est demandé mine de rien.
St'encore plus compliqué que dans le cours webdesign combien de 'place' ça prend

c du webdesign en fait ca
 
c'est: globalement quelles zones (tailles emplacement) seront comblées par quelles infos (nav, images, texte)
 
en fait ouais trop
il faudrait passer au cours 2 celui ou on a fini la maquette

Donc ? On enlève et on passe à la suite ou on copiera ?

ui (edit)

Comme ça ?

c hardcore comme debut mais ouais c l'idée
ttes facons, on est pas la pour faire du nioubisme

Q : pourquoi xhtml/css ? Enfin, pourquoi pas en html ? Et puis comment être sûr que Dreamweaver sort ça ? Et puis ça me servirait à quoi de le savoir ? Et si on veut le faire en Flash, on fait comment ?
 
Q : Vaut mieux utiliser un logiciel ou peut-on monter cette maquette "à la main" avec un éditeur de texte ? A moins que Photoshop ne le fasse ?

l'est chaud le mad, ca y est
 
Q : pourquoi xhtml/css ? Enfin, pourquoi pas en html ?
 
Tres bonne question mad! (:D) le xhtml, comme son nom l'indique est un HTML 'extensible'. Ce qui change avec le HTML pas "extensible" c'est que :
1- le xhtml est compatible avec le XML, le langage de description de données (/d'information) d'aujourd'hui et surtout de demain. En gros, ca peut servir a plein de choses: pour le web il suffit de jeter un oeil a RSS ou ATOM pour la syndication de contenu ou encore le nouveau format d'image basé sur le XML: le format SVG (image vectorielle, ultra-legere puisqu'au format texte et animable).
Donc XHTML => description des données présentes dans la page (textes, images)
brut, ca donne un truc tout moche: une liste de texte et d'image les un a la suite des autres. C'est là que les CSS (feuilles de style) prennent le relais pour rendre ca joli. Les CSS sont là pour définir comment seront affichées telle et telle balise (position, couleurs etc.)
 
2- plus strict que le html simple (qui est un peu interpreté par les navigateurs comme bon leur semblent), il force le respect d'un certain  nombre de regles :
- bannissement des balises spécifiques à un navigateur, chose qui a bien fleuri pdt la guerre netscape / internet explorer ds les années 96-98 pendant laquelle chacun rajoutait des nouvelles balises pour gerer les memes trucs
- fermeture obligatoire de toutes les balises ouvertes (IE est assez laxiste sur ce point, et c'est pas une bonne chose) que ca soit les balises contenant du texte ou d'autres balises, ou les balises simples ne contenant ni texte ni de balises imbriquées:
<html>...</html>
<br /> ; <img src="image/toto.png" />
- tout est écrit en minuscule, balises correctement imbriquées (et pas croisées du genre: <b><i>texte</b></i>, les attributs sont entre guillements (pas de <img src=image.gif /> mais <img src="image.gif" /> ).
 
(ca a l'air hyper contraignant, mais ca n'est qu'une impression )
 
3- Standardisation!
>>> http://incongru.webdynamit.net/PourquoiLesStandards <<<
et hop c obligé de lire ca, c'est mieux expliqué que tout le fourbis que j'ai dit plus haut
 
Q : Et puis comment être sûr que Dreamweaver sort ça ? Et puis ça me servirait à quoi de le savoir ?
Dreamweaver n'est pas encore capable de sortir du xhtml/css propre:
http://incongru.webdynamit.net/LogicielsWYSIWYG
 
Q : Vaut mieux utiliser un logiciel ou peut-on monter cette maquette "à la main" ?
Du coup, le "must" reste la compréhension de chaque ligne de texte de la partie xhtml et de la partie CSS, et pour ca un notepad evolué (avec coloration syntaxique c'est toujours utile) fait l'affaire
 
 
Il y aura toujours un paquet de gens sur HFR capables de répondre à toutes les questions techniques pointues sur le xhtml/css:
 
liens utiles:
 
http://forum.hardware.fr/hardwaref [...] -26941.htm (et liens present ds le debut du topic)
jpense que le mieux c de poser la question ici et la bas, et de mettre la reponse ds le topic ds le topic dans lequel la question n'aura pas été repondue (donc ici le plus souvent )
 
 
Si un progueux passe par là et remarque des erreurs, faut me signaler
 

C'est bien d'être chaud, mais faut qu'on suive pour les update.

Rah, les quote ça fout le bordel avec les puces qui suivent.

Oui enfin on peut faire du HTML 4.0 strict. La question n'est donc pas vraiment HTML ou XHTML, mais plutôt HTML à l'ancienne mode (Frontpage/Dreamweaver-generated) ou code (X)HTML strict & sémantique.

Yo !    
 
Suri tu as parlé d'un note pad amélioré, tu aurais un petit conseil quand à celui à choisir ?    

le bloc note  

 
j'utilise UltraEdit comme notepad amélioré

je pensais aussi a ultra edit, c celui qu'il y a installé au taf
sinon ya aussi emacs (pour les linusquiens ), par contre, je connais pas ce qu'il fait en coloration syntaxique pour du html (cad si c lisible ou pas)
 
ultra edit je sais pas si c gratos, emacs oui, cay gnu

Je crois pas qu'ultra edit est gratuit

ya conTEXT aussi (c'est celui que j'utilise) et lui est gratos

Le listing des logiciels sur Prog :
http://forum.hardware.fr/forum2.ph [...] 471&cat=10
 
Et un topic sur jEdit :
http://forum.hardware.fr/forum2.ph [...] 641&cat=10

Rha un topic qu'il est bien !! cela dit j'ai presque fini mon site , mais bon j'en suis pas trop content donc je vais peut etre le refaire.
 
En attendant pour mon site j'ai eu un petit probleme d'ou une interogation sur les css. Je peut poster ca ici ?

Bien sûr, je pense que c'est fait pour

Moi j'attend surtout le webdesign parceque le php c'est rentré dans ma petite tête, j'ai même programmé un forum  

 
merci,  
 
Alors voila , voici le site, http://dml.grenier.free.fr/,  
En fait j'ai fait j'ai fait une premiere zone dans laquelle j'ai inseré 2 autres zones.
Je veut que la premiere ai une hauteur qui varie en fonction de celle des 2 autres mais j'arrive pas , Je suis obligé de metre une taille fixes à la premiere.
 
Sur mon site c'est au niveau de la colone news et celle que est à sa droite.
Une idée ?
 
voici le css : http://dml.grenier.free.fr/files/page.css

Je vous post ci dessous les questions que je me pose
 
Déjà, j'espère que vous allez prendre le temps d'expliquer comment créer la feuille de style, perso je pense qu'il faut utiliser un fichier indépendant comme l'a fait dml ci dessus (à prioris c'est ce qui me semblerait le plus logique).
 
Ensuite, comment appeler cette feuille dans chaque page web ? en php c facile, un "include" ou un "require" et hop c'est fait, mais les CSS j'arrive vraiment pas à comprendre, d'autant que leur intégration dans chaque page web doit avoir lieu au niveau du HEADER j'imagine, et pour le moment je ne vois pas du tout comment cela se fait proprement .
Mais cela m'interesse énormément

pour cte topicacademique j'ai un client désigné : le site 4'12
xhtml/css compliant avec plein de trucs bien, sur une idée de suri et une maquette de UB. (je crois que c difficile de faire plus a-propos )
 
http://info.matos.free.fr/cat12/

 
Regarde le source de ma page, tu verra c'est vraiment pas dur (a mon niveau )
En fait tu appelle les feuille que tu a crée par la balise <div class="blop"></div>
 
 
ou par <div id="blip"></div>

D' ailleur la diference <div class=""> et <div id=""> c'est quoi ? je suis pas sur de bien saisir

 
http://www.publishtogether.com/pompeurs/FaqHtmlIdClass

 
l'attribut class te permet d'affecter un style css identique a plusieurs objets, textes, tableaux, images...
l'attribut id te permet d'affecter un style a un UNIQUE objet que tu IDentifie.
 
d'ailleurs si tu passe par la moulinette W3C et que tu a plusieurs attributs ID désignant le meme style, il va râler
 
comme toujours: arretez moi si je me trompe