Creation De Sites

ketene · January 9, 2014

en fait l'idée dans ce que je te disais était d'afficher le numéro dans un div à proximité de l'image, et de le placer en surimpression de l'image via une classe CSS :) dis moi si c'est pas clair

C'est clair. Je vois ça à partir de la semaine prochaine.

terb · January 9, 2014

yep, tu me dis si tu as besoin d'aide :shifty:

ketene · January 13, 2014

C'est remis à plus tard la div class et CSS, faut que je pose du tendon cette semaine sur mon troisième arc ( celui à 2 lames de corne par branche ).

terb · January 13, 2014

voila qui est plutôt sain, je trouve, dans la vie il ne faut pas perdre le sens des priorités :66:

ketene · January 22, 2014

J'ai un peu galéré mais ça marche.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styleessai5fixe.css" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
</head>
<body>
<header>
<div id="header">Aquarelles d'Albi</div>
</header>
<section>
<div id="images">
<img src="images/Albi/Photo1.jpg" >
<div id="titre">
<p> rue des pénitents </p>
</div>
<img src="images/Albi/Photo2.jpg" >
<div id="titre">
<p> le Pont vieux </p>
</div>
<img src="images/Albi/Photo3.jpg" >
<div id="titre">
<p> le Pont vieux </p>
</div>
<img src="images/Albi/Photo4.jpg" >
<div id="titre">
<p> le palais de la Berbie </p>
</div>
</div>
</section>
<footer>
<div id="retour_haut_de_page">
<a href="?"title="Retour haut de page">Haut de page </a>
</div>
<div id="retour_daniel_aquarelles">
<a href="daniel_aquarelles.html">Retour à "Navigation dans mes motifs préférés." </a>
</div>
</footer>
</body>
</html>

Donc imbrication des div pour le HTML

Le CSS c'est ça :

body, html {
padding: 0;
margin: 0;
background-color:#bcae72;
border: 2px solid maroon;
border-radius:10px;
}
#header {
font-size: 2.2em;
background-color: #eadbb3;
position:relative;
width : 910px;
height: 45px;
margin: 5px auto;
line-height: 50px;
text-align: center;
border: 3px solid maroon;
border-radius:10px;
}
#images {
padding: 5px;
overflow: auto;
position: relative;
border: 4px solid #e1cbbf;
border-radius:10px;
background-color : #e1cbbf;
width:900px;
margin:10px auto;
white-space: nowrap;
}
#titre
{
display: inline-block;
width: 150px;
height: 45px;
padding-top: 0px;
margin-left:5px;
border : 2px #c88f00 solid;
border-radius: 10px;
background-color:#c8a97a;
}
#retour_haut_de_page
{
display: inline-block;
width: 90px;
height: 20px;
padding-top: 3px;
margin-left:80px;
border : 2px #c88f00 solid;
border-radius: 10px;
background-color:#c8a97a;
}
#retour_daniel_aquarelles
{
display: inline-block;
width: 320px;
height: 20px;
padding-top: 3px;
margin-left:80px;
border : 2px #c88f00 solid;
border-radius: 10px;
background-color:#c8a97a;
}

Je vais modifier tout mon dossier sur mon serveur perso, une vérification des fois que, et hop chez Orange.

Après je modifierai en PHP en faisant des boucles et des arrays puis une petite modif aussi sur celui qui tourne sous Linux.

Sinon une remarque : fuir les majuscules comme la peste et bien sur les accents ( dans les titres des photos ).

Un truc lourd c'est l'extension des photos sous Windows c'est des fois .JPG des fois .jpg ou .jpeg.je n'arrive pas à mettre le .jpg.

J'y arrive avant le transfert avec Mozilla, c'est avec lui que je mets .jpg comme extension car le serveur Orange n'aime pas les.JPG ( ça n'est pas sytématique ). Et sous Linux il n'aime pas du tout.

Je vais démarrer une ou deux pages sur mes arcs cassés, surtout sur les Greyhound ( ça me démange dans refaire un ).

abach · January 23, 2014

Heu, je plaide coupable, j'ai pas lu tout le fil de ce sujet mais juste une chtite question qui me vient à l'esprit : pourquoi ne pas utiliser un truc tout fait comme Wordpress ?

ketene · January 23, 2014

Comment dire, je voulais savoir comment fonctionne mon site, pouvoir le modifier, changer ce qu'il me plait.

Il existe de nombreux " systéme " qui propose d'aider ou de faire un site ( payant ou non, mis à jour ou pas, bien documentés ou peu ....).

Devant ces nombreux " systéme " j'ai longtemps tourné en rond.

Lequel est le mieux, lequel est le plus facile, lequel ceci, lequel cela ?

Bref je me suis dit que le mieux serait que je l'écrive moi même, comme cela je saurais comment il est fait, comment il fonctionne,

Alors je suis allé sur le site du zéro et j'ai appris le HTML5 et le CSS3. Progressivement, à mon niveau, laborieusement peut être. N'étant pas de formation informaticien ( moi c'est plutôt math physique chimie ) j'ai un peu peiné.

Mais comme disait Pierre Dac, je suis arrivé à rien,mais tout seul.

Comme je suis chez Orange, les pages perso gratos ne permettent que HTML et CSS.

Pour optimiser mon site j'ai appris le PHP. Il me fallait juste les boucles, ça s'est fait presque sans peine.

Bien sur il y a des hébergeurs. Mais là encore, lequel est le bon ?

Et puis, pour mes aquarelles ou maintenant aussi pour mes arcs d'inspiration Sino-Mongole,

je n'ai pas besoin d'un super site avec des trucs et des machins qui clignotent dans tous les coins.

Et surtout je me suis dit que le principal pour un site c'était d'être mis à jour régulièrement.

On est confronté à une offre de " systéme " pour faire son site et offre d'hébergeurs assez importante. Il est difficile de s'y retrouver. Certains " systéme " permettent ceci et pas cela; même remarque pour les hébergeurs.

Tiens c'est un peu comme choisir un abonnement pour le téléphone portable, ou le portable. Une prise de tête garantie, un dédale infernal pour essayer de comparer ( on serait tenter de dire que c'est fait exprès ) ( ça me rappelle l'époque ou j'ai voulu m'acheter mon reflex numérique )............

terb · January 24, 2014

bravo :clapping:

apprendre le développement, même sur des langages simples, quand on n'a pas la formation c'est vraiment pas évident. En fait le langage est très peu important, il faut surtout choper une "tournure d'esprit" d'informaticien. C'est à dire : comprendre comment l'ordi va comprendre ce qu'on lui dit. J'en ai vu beaucoup, même en école d'ingé en info, qui n'ont jamais chopé le truc, ils n'avaient surement pas le cerveau fait pour ça. tout ça pour dire que réussir à faire son site en apprenant tout, c'est chouette.

Ketene, je devine que tu as envie encore de t'améliorer et je serais ravi de t'aider si tu en as besoin. Je peux déjà réagir à ton code :

<img src="images/Albi/Photo1.jpg" ><div id="titre">    <p> rue des pénitents </p></div>

1. quand on ouvre une balise, on la ferme, sinon le document n'est pas compatible XHTML. pour le moment ça doit t'en secouer une sans faire bouger l'autre :06: mais quand tu voudras faire du Javascript, ça va être très gênant. donc il vaut mieux prendre l'habitude de fermer ce qui est ouvert, en l’occurrence pour la balise img ça donnerait soit <img src="images/Albi/Photo1.jpg"></img> , soit <img src="images/Albi/Photo1.jpg" />
2. tu as mis un attribut id="titre" sur tous tes div de titres, or un id dans un document doit être unique, par définition. tu peux faire exactement la même chose avec une classe (class="titre") qui elle n'a pas à être unique. si tu veux utiliser un id par titre, il faut en mettre un différent à chaque fois : id="titre1" , id="titre2" . probablement que ça marche quand même comme ça, mais c'est nuisible à la compatibilité cross-browser donc il vaut mieux changer d'habitude.

sinon un petit mot sur les CMS open source : il y a du bon et du moins bon. et aussi du très mauvais :06: personnellement pour ce genre de site, je conseille très fortement Wordpress, de tous les CMS que je connais c'est de très loin le meilleur en terme de performances, fiabilité, sécurité, facilité d'utilisation ... vraiment que du bon, c'est un très joli produit.

bon après je dis ça pour enrichir une remarque lue plus haut, mais je ne remets pas en cause le choix d'un développement spécifique, surtout si le but est d'apprendre/comprendre et de conserver une maitrise de A à Z du site.

'hope it helps ! :66:

terb · January 24, 2014

(puis pour le coup, avec la contrainte de ne pas mettre de code côté serveur, les CMS sont exclus sauf à faire dans la bidouille un peu compliquée)

ketene · January 24, 2014

bravo
apprendre le développement, même sur des langages simples, quand on n'a pas la formation c'est vraiment pas évident. En fait le langage est très peu important, il faut surtout choper une "tournure d'esprit" d'informaticien. C'est à dire : comprendre comment l'ordi va comprendre ce qu'on lui dit. J'en ai vu beaucoup, même en école d'ingé en info, qui n'ont jamais chopé le truc, ils n'avaient surement pas le cerveau fait pour ça. tout ça pour dire que réussir à faire son site en apprenant tout, c'est chouette.

Ah la tournure d'esprit d'informaticien ( musique de J Ferrat Les saisons ).

Quand j'ai voulu installer ma première Mandrake 7.0 ( je crois ) j'en ai tâté de la tournure d'esprit !

Décidement MPC et Informatique modèlent le cerveau bien différemment.

Imprimer dans un fichier ben faut comprendre ça ! Moi j'imprime avec mon imprimante.

Des exemples comme ça j'en ai des dizaines.

Ils disaient que Linux c'était facile ( :06: ) que ça s'installait sans problème. C'était compter sans les erreurs d'impressions sur les revues, les lignes de codes " évidentes " pour le pro ( donc non stipulées ) mais hélas absentes pour le débutant. Les fais un " Ceci " puis un " Cela ", lance un " truc " suivi d'un " machin " pour modifier " bidule ".

Un peu comme expliquer comment tirer à 90 m en FITA à un archer débutant.

J'y suis arrivé façon artisan ( en mathématique mes profs me qualifiaient déjà d'artisan mathématicien ) mais comme j'arrivais à la solution.

Donc j'ai toujours le même cerveau..........

J'avais bien lu que la seule différence entre une id et une class était que l'id devait être unique. Mais comme j'en avais mis plusieurs et que ça marchait.......................

Et des fois on lit, ou on trouve du code ou il manque les balises de fermeture.

Le bon usage que je respecte à la lettre c'est la structuration du code ( j'avais déjà bricolé un peu de C ).

Ca aide vraiment à comprendre et on s'y retrouve très facilement.Par contre je cherche toujours un tuto sur Notepad ou BlueFish ( Linux ) pour déplacer des blocs, bref aller plus vite.

Bon promis je fais ce que tu m'a dit.

sinon un petit mot sur les CMS open source : il y a du bon et du moins bon. et aussi du très mauvais :06: personnellement pour ce genre de site, je conseille très fortement Wordpress, de tous les CMS que je connais c'est de très loin le meilleur en terme de performances, fiabilité, sécurité, facilité d'utilisation ... vraiment que du bon, c'est un très joli produit.

Voila tu le résumes bien. Pas facile de s'y retrouver dans toutes ces offres de CMS open source ( que j'appelais des " systémes " de quoi faire dresser les cheveux d'un informaticien mais pas d'un MPC ). Un programme ( Dreamwaver par exemple ) va me pondre mon site. Mais si je veux modifier quelque chose plus tard ?

C'est pourquoi j'ai préféré me faire mal à la tête d'abord et écrire ensuite. Et puis en informatique ça change vite, tu utilises un programme un jour, puis Windows change de version et pan sur le bec ça marche plus !

Quand aux hébergeurs.............vaste programme !

Le mien n'est pas terrible mais gratos. Mes 2 sites n'ont pas besoin d'un dynamisme où ça clignote dans tous les coins.

J'ai réussi à m'installer 2 serveurs locaux sous Seven et Linux ( Ubuntu ). Mysql pour moi c'est encore le grand bain !

(puis pour le coup, avec la contrainte de ne pas mettre de code côté serveur, les CMS sont exclus sauf à faire dans la bidouille un peu compliquée).

Là j'ai pas compris :

Merci de ta patience.

Edited January 24, 2014 by ketene

abach · January 24, 2014

J'ai aussi, il y a bien longtemps, crée un ou deux sites de toutes pièces, avec Dreamweaver. Depuis, j'ai découvert les CMS. J'ai commencé avec SPIP, puis je suis passé à Wordpress. Aujourd'hui, je me dis qu'un site Internet, un blog pour parler comme les jeunes, c'est comme une boite de raviolis. Il y a d'un côté la boite en elle même (le moteur), il y a ensuite l'étiquette qui rend la boite plus ou moins présentable (ça c'est les feuilles de styles), la sauce (les différents plugins) et enfin les raviolis (le contenu).

Je préfère me concentrer sur les raviolis, à pouvoir changer l'étiquette si je veux, modifier la sauce, en gardant une boite constante. Je ne veux plus devoir toucher à mes vieux raviolis chaque fois que je modifie un peu la sauce.

Comme je l'ai lu un peu plus haut, la boite (wordpress) est plutôt pas mal foutue et je serais bien incapable d'en faire une aussi bien, respectueuse des standards et tout et tout.

Pour mettre ma boite de ravioli en rayon, j'ai pris un hébergeur payant (pas bien cher) qui m'offre un service largement suffisant. Je ne dépend donc plus de mon FAI, je n'ai pas à supporter la pub des hébergeurs gratuits, la censure de certaines plateformes, bref, je suis chez moi.

ketene · January 24, 2014

On s'y perd vite à vouloir comparer pour trouver la meilleure offre d'hébergeur, à creuser les offres, plus on fouille plus c'est confus ( comme comparer des forfaits téléphoniques ).

Hébergeur gratuit et pub, non merci.

Sinon coté moto j'ai toujours ma mamy de 1994 Transalp, j'ai passé mon permis à 57 ans.

terb · January 24, 2014

ah ben le code trouvé sur le net n'est pas toujours exemplaire, c'est sûr. Tu as bien raison de respecter scrupuleusement la structuration des balises, c'est également nécessaire pour la compatibilité XHTML. Par exemple on n'écrit jamais <b><i>toto</b></i> , il faut que l'imbrication des balises soit structurée et ordonnée : <b><i>toto</i></b> ou <i><b>toto</b></i> , il faut imaginer que ce sont des boites dans des boites : tu ne peux pas fermer la boite intérieure si la boite extérieure est déjà fermée :)

sinon ce que je disais sur la fin c'était que ton hébergement Orange n'accepte pas le code exécuté côté serveur comme le PHP , or les CMS sont en PHP (ou autre langage côté serveur, peu importe) ce qui t'empêche de toutes façons de déployer un Wordpress sur ton hébergement existant.

ketene · January 24, 2014

Ca y est tout est pile poil.

ketene · January 25, 2014

Sinon tout est à jour en terme de syntaxe.

Seul bémol l'affichage.

Tout se passe bien sous Seven et Firefox 27.0. Sous Ubuntu et Firefox 26.0 Canonical 1.0 certaines photos sont trop larges et les photos sont donc décalées en dessous d'où elles devraient être. Dans les 2 cas je suis en 1280x1024.

Je n'ai pas de Mac, c'est peut être aussi le bouic.

Je cherche donc ( un peu ).

terb · January 26, 2014

il y a bien moyen de faire en sorte que la taille des images s'adapte à la résolution de l'écran (enfin de la fenêtre du navigateur pour être précis) mais c'est un peu galère

ketene · January 26, 2014

Ah ça pour une galère.

Bon il y a mieux, les permissions sous Linux.

Edited January 26, 2014 by ketene

abach · January 27, 2014

+1 :06:

ketene · January 28, 2014

J'ai encore eu quelques surprises avec des photos dont l'extension était .JPG ( là Ubuntu n'aime pas du tout et le serveur d'Orange non plus évidemment ).

Bon je régle ça à la console ou directement sous Mozilla.

C'est quand même sciant.........

Sinon je galère un peu ( pas cherché assez ) pour passer ce bout de code HTML en PHP

<div class="images">
<img src="images/L'Agenais/photo3.jpg" > </img>
<div class="titre">
<p>Barbaste</>
</div>

</div>

J'ai un dossier images/ dans lequel des sous dossiers contiennent ( par exemple L'Agenais ) ( là je sais que c'est une connerie de mettre des majuscules et l'apostrophe : je l'frais pu m'sieur ! ) les photos nommées photo1.jpg photo2.jpg......................Pratique pour ma boucle for en PHP.

J'ai une arrays ( meme indexage et nom des photos correspondantes . Un boucle for sert à mettre un nom sur une photo.

Sur la vieille version HTML le code HTML était :

<div id="images">
<div class="image"><img src="images/Gerberoy/photo1.jpg" alt="photo1 /> </div>
<div class="image"><img src="images/Gerberoy/photo2.jpg" alt="photo2 /> </div>
<div class="image"> </div>
</div>
<div id="liste_photos">
<ul>
<li>1 La maison bleu</li>
</ul>
<ul>
<li>2 Ruelle</li>
</ul>
</div>

Que j'avais traduit en PHP ( laborieusement ).

<div id="images">
<?php
$maxi=2;
for ($nbre = 1; $nbre <= $maxi; $nbre++)
{
echo '<div class="image"><img src="images/Gerberoy/photo'.$nbre.'.jpg" alt="photo'.$nbre.' /></div>'."\n";
}
?>
<div class="image"> </div>
</div>
<div id="liste_photos">
<ul>
<?php
$titre=array (1 =>'La maison bleu');
for ($numero = 1; $numero <= 1; $numero++)
{
echo ' <li>'.$numero.' '.$titre[$numero].'</li>'."\n";
}
?>
</ul>
<ul>
<?php
$titre=array (2 =>'Ruelle');
for ($numero = 2; $numero <= 2; $numero++)
{
echo ' <li>'.$numero.' '.$titre[$numero].'</li>'."\n";
}
?>
</div>

Quand je rajoute une photo, je modifie les boucles aprés avoir mis la photo dans le dossier et le nom de la photo dans l'array.

Ca me donnait des fichiers moins gros, plus vite modifiables, mais c'était la version où on faisait défiler les images sans savoir à quel endroit elle correspondait.

Le site actuel fait défiler les images avec le titre en bas à droite.

Mais je suis perdu dans la traduction de ce code HTML en PHP :

<div class="images">
<img src="images/L'Agenais/photo3.jpg" > </img>
<div class="titre">
<p>Barbaste</>
</div>

</div>

J'ai plus pensé à traduire qu'à construire peut être. Quel remue méninge !

terb · January 28, 2014

en fait il faudrait que tu ais tout dans la même boucle, comme ça tu récupères tes valeurs dans tes tableaux par leur index avec $nbre

ketene · January 28, 2014

J'y bosse en ce moment.

Sitôt que ça marche je le poste.

ketene · January 28, 2014

C'est pas ça encore ( c'est l'heure de mon créneau d'entraîneur de club ).

<section>
<div class="images">
<?php
$maxi=3;
for ($nbre = 1; $nbre <= $maxi; $nbre++)
{
echo '<div class="images"><img src="images/Albi/photo'.$nbre.'.jpg" alt="photo'.$nbre.'/> </div>'."\n";
</div>
<div class="titre">
$titre=array (1 =>'Rue des Pénitents','Le Pont-Vieux','le Pont-Vieux');
<li>'.$nbre.' '.$titre[$nbre].'</li>'."\n";
}
?>
</div>
</section>

terb · January 28, 2014

tu brules :clapping: il faut que tu sortes de la boucle l'initialisation de ton tableau et que tu fasses du propre dans tes echo parce que là tu as un peu mélangé le PHP et le HTML :ouf:

ketene · January 29, 2014

Les résultats de ce matin :

<!DOCTYPE html>
<html>
<?php include("headnavmotifs.php"); ?>
<body>
<header>
<div class="header">Aquarelles d'Albi</div>
</header>
<section>
<div class="images">
<?php
$titre=array (1=> 'Rue des Pénitents' , 'Le Pont-Vieux' , 'Le Pont-Vieux');
$maxi=3;
for ($nbre = 1; $nbre <= $maxi; $nbre++)
{
echo '<div class="image"><img src="images/Albi/photo'.$nbre.'.jpg" alt="photo'.$nbre.' /></div>
<div class="titre"><p>'.$titre[$nbre].'</p> </div>'."\n";
}
?>
<div class="image"> </div> 
</div>
</section>
<?php include("retourhppn.php"); ?>
</body>
</html>

Tout y est, j'ai même ma barre de défilement, seul problème les images sont l'une sous l'autre.

Là je crois plus que c'est une histoire de CSS.

" Y a quelque chose qui cloche là-dedans,
J'y retourne immédiatement "

terb · January 29, 2014

bravo :clapping: tu as bien pigé l'idée, beau boulot !

les images l'une sous l'autre oui c'est du css. ça ressemblera surement à quelque chose comme ça :

.image {  float: left;}

(avec un peu de padding pour éviter que les images soient collées les unes sur les autres, et peut-être un clear:both après ta boucle selon ce que tu as en-dessous)

tu gagneras aussi surement à englober chaque couple image+titre dans un div qui sera en float:left , ce qui te permettra de déplacer les div groupés deux par deux (une image et son titre). un truc du genre :

echo '<div class="bloc">         <div class="image">            <img src="images/Albi/photo'.$nbre.'.jpg" alt="photo'.$nbre.' />         </div>         <div class="titre">            <p>'.$titre[$nbre].'</p>         </div>      </div>'

Creation De Sites

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation