meta données pour cette page
  •  

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
outils:duweb [08/05/2023 21:08] – [🛠️ Outils & Utopies] laureoutils:duweb [11/05/2023 02:27] (Version actuelle) – laure
Ligne 1: Ligne 1:
-====== 📋 pour faire des sites web ====== 
-{{tag> OutilsWeb web html css js }} 
-Souvent confondu avec Internet, le **web** c'est le morceau qu'on peut consulter avec un navigateur comme Firefox ? ? 
- 
- 
-Ce sont donc tous les sites que l'on explore de liens en liens, d'onglets en onglets…\\ 
-Comme j'y consacre pas mal de temps, ça me fascine de comprendre mieux comment ça marche ces affichages là, mais comme ça évolue pendant que j'apprends c'est pas gagné d'y arriver !  
- 
-{{drawio>outils:diagram1.png}} 
- 
- 
-====Clients & Serveurs==== 
- 
 <WRAP group> <WRAP group>
-<WRAP third column> 
-Le réseau d'ordinateurs différencie 2 types de machines qui échangent des fichiers, si on schématise  : \\ 
-  * les 🖥️ **clients** : c'est nous avec nos postes de bureau et nos téléphones. Avec un navigateur on demande des pages à afficher. \\ \\ 
-  * les 🏤 **serveurs** : c'est là que sont hébergés les sites, ces machines répondent aux commandes de pages et envoient les infos.  
- 
-On retrouvera donc dans les 2 cas un système de dossiers / fichiers qui structure l'organisation.  
-<del>Le serveur parle toutes les langues clients + quelques autres.</del>  
-</WRAP> 
-<WRAP twothirds column> 
-=== Langages du World Wild Web === 
-''Pour exister, les sites et les appli que nous consultons utilisent tous certains standards :''  
-<WRAP group><WRAP half column> 
-🖥️ Côté **Client** 🖥️, notre navigateur sait lire et interpréter :  
-  * le **HTML** : structure les pages que nous consultons avec des balises. 
-  * le **CSS** : donne du style à l'affichage du HTML = couleurs, taille, typos...etc. 
-  * le **JavaScript** : crée les animations, les interactions et les cookies 🍪.  
- 
-[[web:bases:HTMLCSSJS |Je me sers de cet espace pour apprendre et jouer avec tout ça...]] 
-</WRAP> 
 <WRAP half column> <WRAP half column>
-🏤 Côté **Serveurs** 🏤, les machines préparent la page à envoyer avec ces outils :  
-  * le **PHP** : génère des pages html de façon dynamique à partir d'une structure qu'il remplit en interrogeant une BdD ou d'autres fichiers. [[outils:duweb:_:PHP|J'ai suivi un cours là-dessus]]  
-  * les **Bases de données** : certains contenus sont stockés dans un tableau virtuel et pas dans des fichiers. 
-  * Aujourd'hui **JavaScript** est aussi un langage côté serveur, mais je n'ai pas exploré cette dimension   
-</WRAP> 
-</WRAP> 
-</WRAP></WRAP> 
-<WRAP group><WRAP half column> 
 <div center round box 90%> <div center round box 90%>
-=== 🌐 ils expliquent 'achement bien  ===+<lead>🌐 ils expliquent très bien </lead>
 [[https://adn56.net/pres/naviguer/#/| l'Université Pop de Damgan a une présentation très claire ici]] \\ [[https://adn56.net/pres/naviguer/#/| l'Université Pop de Damgan a une présentation très claire ici]] \\
 [[https://docs.framasoft.org/fr/manueldumo/|Le manuel des libertés numériques pour tout le monde de Framasoft est une bonne ressource ]] [[https://docs.framasoft.org/fr/manueldumo/|Le manuel des libertés numériques pour tout le monde de Framasoft est une bonne ressource ]]
-</div></WRAP><WRAP half column> +</div> 
-<div center round box 90%> +
-== 💢 je tente des trucs == +
-[[outils:duweb:_:HebergementMutu| J'ai des petits sites pour jouer]] +
-[[outils:duweb:_:Mon1erVPS| Mon premier Serveur Privé Virtuel]] +
-  +
-</div> +
-</WRAP></WRAP> +
-==== Médias & Usages ==== +
-<WRAP group> +
-<WRAP third column> +
-=== Images & Fichiers === +
-Les sites internet fonctionnent partout et pour tous de la même façon, parcequ'ils sont basés sur ces langages normés et opensource. Pour ce qui est des fichiers "durs" on s'en tiendra de la même façon aux formats standards que sont :  +
-  * **JPG**, **GIF** et .**PNG** pour les images. Privilégier le .PNG pour les graphismes. [[https://www.lafabriquedunet.fr/creation-site-vitrine/articles/optimiser-images-web/|plus d'infos chez la fabrique du net]] +
- +
- +
-  * **PDF** pour les fichiers à télécharger. Les serveurs web ordinaires ne font pas tourner de suite bureautique et on ne peut pas parier sur l'équipement logiciel des clients ( Microsoft, Libre Office, autres...). +
 </WRAP> </WRAP>
  
-<WRAP third column> +<WRAP half column> 
- +Veille aléatoire sur le sujet "web" :  
-=== Multimédia & Documents interactifs === +{{rss>http://www.liens.chiquette.fr/feed/atom?&searchtags=web description 3 date 1d }} 
-Vidéos (streaming), Audio (podcast), Cartes 🗺️, Présentations animées...  Certains sites/serveurs? sont spécialisés pour créer et diffuser ces autres formats.  +
- +
-En général ils offrent le moyen d'intégrer à d'autres sites les contenus construits chez eux. //Typiquement les lecteurs vidéos que l'on peut inclure à sa page perso.//  +
- +
-Il vaut souvent mieux s'appuyer sur ces services que d'héberger sur son site ce type de médias, à moins de vouloir découvrir l'administration de serveur dédié... +
-  +
-</WRAP> +
-<WRAP third column> +
-  +
-=== Travail collaboratif & réseaux sociaux === +
-D'autres services existent pour élaborer ensemble des fichiers et permettre la coopération d'un groupe d'invités. Comme par ex. les sites wiki, les services de "pads", plein d'autres... +
- +
-<div center round info 100%> +
-==== 🌩️==== +
-=== Il n' y a pas de cloud,=== +
-=== il n'y a que les serveurs de quelqu'un d'autre.=== +
- +
- +
-paraphrase de [[wpfr>Richard_Stallman|Richard Stallman]] lue sur le web. +
-</div> +
-  +
- +
 </WRAP> </WRAP>
 </WRAP> </WRAP>
  
-<div center round box 90%> +<lead>On va pas se mentir j'ai une relation particulière avec les écrans... Mais ça se passe ailleurs : </lead> 
-== 🌐 + de notes sur des trucs dans le genre : ==+{{tag> OutilsWeb outils web }}
  
-</div> +<nav> 
-  +[[web:start]] 
-====🛠️ Outils & Utopies ====+[[web:ressources | J'en mange]] 
 +[[web:bases:HTMLCSSJS |J'en fais]] 
 +[[web:xxxx |c'est le grand bain]] 
 +</nav> 
 +====== 🛠 📋 pour faire des sites web ======
  
 <WRAP group> <WRAP group>
 <WRAP half column> <WRAP half column>
  
-=== Outils de création - d'expression - de publication === +</WRAP> 
 + 
 +<WRAP half column> 
 + 
 +=== Outils Web  ===  
 +<lead>//de création - d'expression - de publication//</lead>
   * [[outils:duweb:DokuWiki| DokuWiki ici]]   * [[outils:duweb:DokuWiki| DokuWiki ici]]
   * [[outils:duweb:WordPress|WordPress là]]   * [[outils:duweb:WordPress|WordPress là]]
   * [[outils:duweb:YesWiki|YesWiki à créer]]   * [[outils:duweb:YesWiki|YesWiki à créer]]
-  * [[outils:duweb:ComparatifCMS| Comparer des CMS]] +  * [[outils:duweb:BootStrap|bootstrap à créer]] 
- +  * [[outils:duweb:xxx | à créer]]
-===FTP : installer un client=== +
-[[https://filezilla-project.org/|Télécharger Filezilla]] + [[https://filezilla.fr/|Aide en Français]] +
- +
-Ce logiciel permet d'accéder à l'arborescence de dossiers de votre serveur. Pour faire des sauvegardes de votre site et pour y modifier des fichiers.   +
- +
-=== Éditeur de texte === +
-<lead>Ce logiciel va colorier le code pour le rendre plus facile à lire et à comprendre. </lead> +
-HTML, CSS, PHP... tous ces codes sont contenus dans des fichiers texte, qu'on pourra plus facilement modifier avec un éditeur intelligent comme par exemple [[https://atom.io/|Atom]], VSC ou [[https://notepad-plus-plus.org/|NotePad+]]+
  
 </WRAP> </WRAP>
-<WRAP half column>+</WRAP>
  
- 
-</WRAP> 
-</WRAP>