Différences

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

--- web:start [05/01/2023 14:10] – créée laure
+++ web:start [11/05/2023 02:17] (Version actuelle) – [Clients & Serveurs] laure
@@ Ligne 1: / Ligne 1: @@
-<nspages -title -tree -subns -exclude:start -exclude:vrac -textNS="des cases dans cette catégorie" -textPages="et d'autres notes:" -displayModificationDates>
+====== 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}}
+===== Quelques questions =====
+<WRAP group>
+<WRAP half column>
+colonnes
+</WRAP>
+<WRAP half column>
+fvdv
+</WRAP>
+</WRAP>
+====Clients & Serveurs====
+<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>
+🏤 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%>
+=== 🌐 ils expliquent 'achement bien : ===
+[[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://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g| Web Demystified - une série de vidéos courtes sous-titrées FR]] \\
+</div>
+</WRAP>
+<WRAP half column>
+**Veille** : les 3 dernières pages marquées sur le sujet "web" :
+{{rss>http://www.liens.chiquette.fr/feed/atom?&searchtags=web description 3 date 1d }}
+</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 third column>
+=== Multimédia & Documents interactifs ===
+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>
+<div center round box 90%>
+== 🌐 + de notes sur des trucs dans le genre : ==
+</div>
+==== Avoir "SON" site ====
+<div group>
+<div half column>
+Aujourd'hui on peut ouvrir une Page sur le Gros Réseau Social en 1 clic, la faire découvrir à ses proches, et même y toucher d'autres utilisateurs 'inconnus'.  Et on peut aussi facilement lancer un blog chez Google, ou une galerie photo avec Instagram et avoir le retour immédiat des compteurs de vues ou de petits cœurs. Des canaux faciles, qui peuvent aussi être utiles c'est vrai. Mais ils ont aussi leurs mauvais côtés, par exemple ils nous dépossèdent de chaque contenu hébergé chez eux. \\ Si un jour ils décident de censurer nos publications, nous n'y pourrons rien, ou pas grand chose. Oh ça n'arrivera probablement pas, mais au fil du temps chaque nouveau Like et chaque nouvelle Vue sera plus difficile à obtenir sans payer leurs services.
+\\
+L'idée d'entretenir un site web indépendant c'est d'être accessible à tous, pas seulement aux usagers de certaines plateformes. C'est créer un point de rdv  pour tous ceux qui veulent suivre notre travail ou se posent les mêmes questions que nous. \\ Et c'est aussi un moyen de se former tout en combattant un peu l'hégémonie de ces 'outils' \\ enfin je crois.
+</div>
+<div half column>
+<div group>
+<div half column>
+=== Vidéos ===
+Un hébergement standard n'est pas optimisé pour le streaming de vidéos, et même si votre CMS accepte les .mp4 et .mpg dans sa bibliothèque il vaut mieux passer par une plateforme spécialisée comme Youtube, Vimeo ou PeerTube. \\
+</div>
+<div half column>
+=== Code ===
+La promesse de WordPress c'est qu'on peut créer et gérer un site complexe sans connaître le code informatique. Et c'est vrai. \\
+\\ Mais ce sera plus simple de comprendre l'outil et de le modifier à sa guise si on connaît 2 ou 3  bases sur le sujet: CSS, HTML, PHP, JS... des noms qui ne doivent pas sembler trop barbare à un futur administrateur de site web ! \\
+</div>
+</div>
+</div>
+</div>
+====🛠️ Outils & Utopies ====
+<WRAP group>
+<WRAP half column>
+===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 via une interface graphique.
+=== Éditeur de texte ===
+Ce logiciel va colorier le code pour le rendre plus facile à lire et à comprendre.
+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]], [[outils:duweb:VSCode| VSCode / Codium]] ou [[https://notepad-plus-plus.org/|NotePad+]]
+</WRAP>
+<WRAP half column>
+=== Outils Web de création - d'expression - de publication ===
+[[outils:duweb:|pour faire des sites]]
+  * [[outils:duweb:DokuWiki| DokuWiki ici]]
+  * [[outils:duweb:WordPress|WordPress là]]
+  * [[outils:duweb:YesWiki|YesWiki à créer]]
+  * [[outils:duweb:ComparatifCMS| Comparer des CMS]]
+</WRAP>
+</WRAP>