Mon site ;)

Soranne · Le 08/07/2009, à 21:11

Voilà je viens de faire un site pour expliquer aux débutants qui sont toujours sous l'ère du Windows (oups je l'ai dit) comment migrer vers Ubuntu facilement : http://ronan.gaillard.free.fr/linuxsimple/.
S'il vous plaît, donnez vos remarque et critiques, j'aimerais tant l'améliorer.
Merci.

Dernière modification par Soranne (Le 08/07/2009, à 21:11)

PPdM · Le 08/07/2009, à 21:24

salut
sympa mais ton lien GUL ne fonctionne pas
et tu propose une installation WUBI?
Perso je ne suis pas convaincu de cette solution.
Il faudrait préciser que celle ci est, avant tout, destinée a ceux qui veulent tester et que ce n'est pas une solution pérenne

Soranne · Le 08/07/2009, à 21:36

Merci pour ton commentaire!
En fait là je prépare une explication pour installer à partir du live cd, c'est assez compliquer à expliquer pour des gens qui s'y connaissent pas trop avec ces histoires de partitions:/.
Tu es sûr que le lien GUL ne marche pas? il marche bien chez moi!

Dernière modification par Soranne (Le 08/07/2009, à 21:38)

Maxouille · Le 08/07/2009, à 21:38

Salut,
Déja commence par faire un design de site plus accueillant, ça donne pas envi de lire la.
Ensuite l'installation avec Wubi est .... bof quoi ... On dépend quand meme de windows etc

pasa88 · Le 08/07/2009, à 21:39

Salut!

1) Manque une transition : "Nous allons donc maintenant commencer à rentrer dans Ubuntu ..." , tu pourrait dire quelque mots sur d'autres distributions
2) Pourquoi tu présente uniquement "wubi"? l'installation en wubi devrait passer en second temps , c'est moins important et ça génère le plus des problèmes.
3) Et pour les utilisateurs qui vient d'acheter un PC vierge , comment ils font si ils ont pas de windows?

Pour être tranchant , ton doc est mal faite , je suis pas convaincu.

Soranne · Le 08/07/2009, à 21:41

Je suis en tran de m'occuper de l'installation à partir du live cd .
Par contre c'est vrai je ne suis pas très fort au niveau du design mais je vais essayer d'arranger ça...

PPdM · Le 08/07/2009, à 21:41

commence par l'installation simple il n'y a rien a faire,puis développe après sur les autres mode d'installation.
et regarde un peut les docs, beaucoup sont bien faites et t'aiderons a tirer un fil directeur dans les différentes solutions!:D
Il ne faut pas oublier qu'un système GNU/Linux est essentiellement configurable a volonté

compte supprimé · Le 08/07/2009, à 23:23

Personnellement, j'ai regardé le code de ton site ! Beaucoup trop compliqué et pas pratique du tout (pour toi)...

Il faut faire ça avec des css (cascaded style sheets). Comme un exemple vaut mieux qu'un grand discours, je t'en ai ré-écrit le début.
La section <head> contient un lien sur le fichier séparé test.css, qui contient tous les styles de la page :

<link href="test.css" type="text/css" rel="stylesheet" />

Tel que c'est, ce fichier doit être dans le même répertoire que le fichier qui l'appelle, à savoir test.html, que voici :

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" />
<head>
	<title>test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link href="test.css" type="text/css" rel="stylesheet" />
</head>
<body>
	<div id="conteneur">
		<h1 class="gras">Linux simplement</h1>
<p>Bienvenue sur <span class="italiques">Linux Simplement</span></p>
<p>Cette page a pour but de vous présenter Linux et de vous montrer comment l'utiliser et l'installer sans avoir de grosses connaissances en informatique.</p>
<p>Linux est un <span class="gras">système d'exploitation libre et performant</span>, il n'est ni moins bien, ni mieux que Windows, il est simplement différent.
<p>Mais d'abord, qu'est qu'un système d'exploitation?</p>
<p>C'est le logiciel que l'on installe sur un ordinateur et qui lui permet de rendre les différents services que l'on attend de lui. Pour vous fournir un point de repère, Windows XP ou Vista sont eux aussi des systèmes d'exploitation.</p>
<p>Dans cet article nous allons donc vous expliquer comment utiliser Linux et l'installer. Il faut aussi savoir que il existe différentes distributions de Linux (une distribution est en quelque sorte une sorte de version de Linux) qui sont nombreuses : Ubuntu, Debian, Mandriva, Fedora,...</p>
<p class="rapproche">J'ai ici choisi de vous présenter Ubuntu puisque c'est celle que j'utilise chaque jour et qui me semble la plus complète et simple. De plus cette distribution possède une communautée très accueillant qui vous aidera en cas de problèmes ( <a href="http://forum.ubuntu-fr.org/index.php">http://forum.ubuntu-fr.org/</a>).</p>
<p>Si certains d'entre vous s'inquiètent quant au prix de cette distribution, il ne faut pas s'inquiéter!!! c'est totalement gratuit, et c'est là l'un des gros avantage de Linux.</p>
<p>Pour les Windowsiens ;) :</p>
<p><span class="gras">Les logiciels : </span>Si vous utilisez Firefox, Thunderbird, The GIMP,... sachez que ces programmes existent sous Linux. Si vous utilisez Photoshop, Outlook, Moviemaker, Nero Burning Rom, sachez que certains de ces logiciels peuvent tourner sous Linux mais que ce n'est pas forcément très simple à mettre en place, sachez surtout qu'il existe des logiciels équivalents (différents mais qui remplissent des tâches identiques et la plupart du temps gratuit).</p>
<p class="rapproche"><span class="gras">Votre matériel sera-t-il reconnu ? </span>Certains périphériques n'ont pas de drivers pour Linux. Ne vous inquiétez pas cela est principalement vrai pour le matériel exotique. Le mieux étant bien évidemment d'utiliser du matériel compatible.</p>
<p class="rapproche"><span class="gras">Les jeux commerciaux : </span>(par commerciaux j'entend payant) sont rarement compatibles avec Linux mais pour certains, il est possible d'utiliser Cedega ou Wine pour les faire fonctionner. Cependant il existe aussi de très nombreux jeux libres et/ou gratuits de qualité dédiés à Linux.</p>
<p>Nous allons donc maintenant commencer à rentrer dans Ubuntu :)...</p>

	</div>
</body>
</html>

Copie ça sur ton bureau, dans un fichier nommé test.html, par exemple.
Et voici le fichier css :

body {
	margin: 0;
	padding: 0;
}
#conteneur {
	width: 90%;
	margin-left: 4%;
	margin-top: 2%;
	padding: 1%;
	font-family: 'DejaVu Sans', sans-serif;
	background-color: #ffcc99;
	/*border: 10px solid #00ff00;*/
}
h1 {
	text-align: center;
	font-size: 2em;
}
p {
	margin-top: 1.1em;
	margin-bottom: 0.1em;
}
.italiques {
	font-style: italic;
}
.gras {
	font-weight: bold;
}
.rapproche {
	margin-top: 0.5em;
}

Celui-là, tu l'enregistres sous test.css toujours sur le bureau.

Puis tu modifies ce que tu veux, les marges, les couleurs de fond et/ou d'avant-plan, les tailles des polices, la couleur des polices (par exemple tu mets color: #00ff00; dans la classe gras)... et tu regardes l'effet sur la page test.html affichée dans ton navigateur (dont tu peux par ailleurs diminuer la taille de la fenêtre, pour voir...). Bien entendu, il faut rafraîchir la page après chaque changement dans test.css...

Bon amusement ! Et pour plus d'infos sur les css : http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html
et sur les liens openweb sur la même page...

Note : si je me permets ces remarques, c'est surtout parce qu'il est très difficile de perdre les mauvaises habitudes, et autant prendre tout de suite les bonnes. En l'occurrence, une css s'applique sur toutes les pages qui l'incorporent. Autrement dit, si tu y modifies quelque chose, ça s'appliquera automatiquement à toutes ces pages. Non seulement ça va très vite, mais tu es assuré d'une homogénéité totale de ta présentation. Ce qui est toujours bien pour le lecteur... aussi !

Note2 : tu peux aussi installer le plugin firebug de firefox. Avec ça tu vois, dans une fenêtre en bas du navigateur, le code source de la page, les styles, etc. et tu peux modifier ça in vivo pour tester... Tu vois directement le résultat. Si c'est bon, tu peux faire la mdif dans ton fichier css, par exemple.

Dernière modification par faustus (Le 08/07/2009, à 23:57)

Soranne · Le 09/07/2009, à 12:06

J'ai rajouté un article sur l'installation à partir du live-cd , là je m'attaque au design, merci pour vos critiques et vos conseils .

Dernière modification par Soranne (Le 09/07/2009, à 12:06)

compte supprimé · Le 09/07/2009, à 13:12

Tu peux remplacer ça :

<div style="text-align: center; font-family: DejaVu Sans; font-weight: bold;">
<p>
<big>
<big>
<big>
<big>
<strong>Linux Simple</strong>
ment!
</big>
</big>
</big>
</big>
</p>
</div>
<big>
<br/>
Bienvenue sur ce site, ici vous allez apprendre très simplement comment utiliser et installer Linux très simplement et sans risques.
</big>
<big>Ici, il n'y a pas de mots compliqués et les explications sont fournies de la façon la plus claire possible :).</big>
<br/>
<br/>
<div style="text-align: center; color: rgb(51, 51, 255);">
<big>
<big>
<span style="font-weight: bold;">Sommaire</span>
</big>
</big>
<br/>
</div>

Par ça :

<h1>Linux Simplement !</h1>
<p class="intro">Bienvenue sur ce site, ici vous allez apprendre très simplement comment utiliser et installer Linux très simplement et sans risques. Ici, il n'y a pas de mots compliqués et les explications sont fournies de la façon la plus claire possible :).</p>
<h2>Sommaire</h2>

et la css :

body {
	/*margin: 0;
	padding: 0;*/
	background-color: #CD8844;
	font-family: serif;
}
h1, h2 {
	text-align: center;
	font-weight: bold;
}
h1 {
	font-family: 'DejaVu Sans', sans-serif;
	font-size: 3em;
}
h2 {
	color: #3333FF;
	font-size: 2em;
}
.intro {
	font-weight: bold;
}

Ça fait à peu près exactement la même chose (j'ai mis les valeurs un peu au pif), mais ce sera beaucoup plus facile pour toi à maintenir que de compter des tas de <big> qu'il faut en plus fermer, à chaque fois... Imagine que tu aies quelques dizaines de pages (ça va vite !)... et que tu veuilles simplement changer la couleur de "Sommaire" et des titres équivalents (<h2>)... Tu vas y passer une heure, alors qu'avec une css, tu changes une ligne : h2 { color: #3333FF;...

Edit : j'ai oublié <body> dans la css (perso, je préfère faire <body> avec des marges et des paddings nuls, puis un <div> qui contient toute la page : ça permet entre autres de modifier facilement la largeur de la page, et, éventuellement, sa position à l'écran)

Dernière modification par faustus (Le 09/07/2009, à 13:25)

Soranne · Le 09/07/2009, à 13:15

Merci :)je regarde ça de suite.

Maxouille · Le 09/07/2009, à 13:18

...apprendre très simplement comment utiliser et installer Linux très simplement...
Bof

PPdM · Le 09/07/2009, à 13:24

Maxouille a écrit :

...apprendre très simplement comment utiliser et installer Linux très simplement...
Bof :|

Je plussoie, je n'avais pas vu la répétition
.apprendre comment utiliser et installer Linux très simplement...serait mieux

Soranne · Le 09/07/2009, à 13:31

:lol::lol:
Merci oui j'ai vu, ne vous inquiétez pas, je ne suis pas non plus une bête en orthographe .

PPdM · Le 09/07/2009, à 13:42

Soranne a écrit :

:lol::lol:
Merci oui j'ai vu, ne vous inquiétez pas, je ne suis pas non plus une bête en orthographe .

Tu n'es pas le seul (hélas, a commencer par moi), mais il faut faire aussi attention aux fautes de Français!!:D

Soranne · Le 09/07/2009, à 14:43

Voilà, je l'ai assez amélioré, j'espère que j'ai pas trop dit de bétises et que le design est assez convaincant .

compte supprimé · Le 09/07/2009, à 15:40

Quelques remarques :
<div id="cadre1">

L'id est un identifiant unique sur la page. Tu ne devrais donc pas avoir plusieurs éléments avec le même identifiant. Ça passe parce que les navigateurs sont assez bien fichus. Mais parfois ça ne passe pas...

Pour faire plusieurs <div> (ou autre chose) identiques, il y a l'attribut class
<div class="cadre">

Tu peux bien sûr mettre les 2, si nécessaire :
<div class="cadre" id="cadre1">
<div class="cadre" id="cadre2">
...
De cette manière, ta div aura les attributs de la classe "cadre" et, en plus ou à la place, les attributs de "cadre1", "cadre2" etc.
Ainsi, si le fond de la classe "cadre" est jaune et l'écriture bleue, tes <div class="cadre"> seront donc par défaut en bleu sur fond jaune. Mais si tu précises que l'écriture doit être être rouge pour "cadre1" et en gras pour "cadre2", tu auras une div rouge sur fond jaune et une autre bleu en gras sur fond jaune.

Bien entendu, si tu fabriques quelque part un <span class="cadre"> ou n'importe quoi d'autre, eh bien la partie correspondante sera en bleu sur fond jaune... La limite, c'est bien sûr les attributs autorisés par la balise (<img class="cadre"> ne donnera évidemment rien...)

Dans la css, c'est noté de cette manière :

#cadre1 c'est l'identifiant
#cadre2
.cadre c'est la classe

Par ailleurs, tu peux aussi directement modifier les formats des balises dans la css
(voir l'exemple que je t'ai donné avec body, h1, h2...)

A part ça, utilise les balises adéquates, et laisse tomber les <strong>, <big> et autres.
Idem avec les <br> partout. Et ne mets des styles dans la page que très exceptionnellement dans des cas très particuliers.

Par exemple, tu as plusieurs <span> pour écrire en rouge. Il suffit de faire une classe "rouge" dans la css :
.rouge {
color: #FF0000; (là c'est un rouge de base, que tu peux changer)
}

Et dans chaque <span> tu mets <span class="rouge">.
Si tu fais <p class="rouge">, c'est tout le paragraphe qui sera en rouge
Je te laisse deviner ce que donnera un <div class="cadre rouge">...
(parce que tu peux aussi donner plusieurs classes à un objet)

C'était la chronique HTML/CSS Facile !

Tiens, encore un bon site (qui date un peu, parfois) :
http://fr.selfhtml.org/html/reference/index.htm
et pour les css, sur le même site :
http://fr.selfhtml.org/navigation/css.htm

Dernière modification par faustus (Le 09/07/2009, à 15:53)

Soranne · Le 09/07/2009, à 15:54

Ok merci beaucoup, je change ça de suite .

compte supprimé · Le 09/07/2009, à 16:09

Sérieux, étudie un peu la question. Parce que je sens que tu vas vers des difficultés que tu auras du mal à résoudre... D'autant plus que tu as du contenu. Tu vas vite avoir plein de pages, et à moment donné, il y aura tellement de trucs à changer pour la moindre modification que tu préféreras ne pas la faire... Et ce sera dommage !

Je te conseille vraiment de regarder ça, et même d'essayer les exemples : http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html

Et parcours également ça : http://openweb.eu.org/ en particulier ceci : http://openweb.eu.org/mise_en_page

Dernière modification par faustus (Le 09/07/2009, à 16:15)

Compte supprimé · Le 10/07/2009, à 16:14

http://www.siteduzero.com/tutoriel-3-13 … e-web.html
Il y a aussi ce lien pour les non-informaticiens ...

Ubuntu-fr

Navigation

Liens de recherche

Annonce

#1 Le 08/07/2009, à 21:11

Mon site ;)

#2 Le 08/07/2009, à 21:24

Re : Mon site ;)

#3 Le 08/07/2009, à 21:36

Re : Mon site ;)

#4 Le 08/07/2009, à 21:38

Re : Mon site ;)

#5 Le 08/07/2009, à 21:39

Re : Mon site ;)

#6 Le 08/07/2009, à 21:41

Re : Mon site ;)

#7 Le 08/07/2009, à 21:41

Re : Mon site ;)

#8 Le 08/07/2009, à 23:23

Re : Mon site ;)

#9 Le 09/07/2009, à 12:06

Re : Mon site ;)

#10 Le 09/07/2009, à 13:12

Re : Mon site ;)

#11 Le 09/07/2009, à 13:15

Re : Mon site ;)

#12 Le 09/07/2009, à 13:18

Re : Mon site ;)

#13 Le 09/07/2009, à 13:24

Re : Mon site ;)

#14 Le 09/07/2009, à 13:31

Re : Mon site ;)

#15 Le 09/07/2009, à 13:42

Re : Mon site ;)

#16 Le 09/07/2009, à 14:43

Re : Mon site ;)

#17 Le 09/07/2009, à 15:40

Re : Mon site ;)

#18 Le 09/07/2009, à 15:54

Re : Mon site ;)

#19 Le 09/07/2009, à 16:09

Re : Mon site ;)

#20 Le 10/07/2009, à 16:14

Re : Mon site ;)

Pied de page des forums