Wave

12 février 2022 par

Installer et utiliser en local sur votre Chromebook un serveur web sous Chrome OS

Même si de manière générale, il est préférable de travailler en mode connecté donc en ligne avec les Chromebook, on peut être amené à l’utiliser en local. Cela concerne principalement le mode hors connexion, en sachant quand même que l’on aura anticipé les fichiers qui seront utilisables dans ce mode. Et puis, même si cela peut sembler étonnant, on peut installer et utiliser en local sur votre Chromebook un serveur web sous Chrome OS. Bien sûr, pas d’appels à une base de données, mais simplement l’emploi de pages en pur HTML et CSS. 

Acer Chromebook Spin 311 CP311-3H-K63V Ordinateur Portable Tactile Convertible 11,6'' HD LCD, PC Portable (Mediatek MT8183, RAM 4 Go, 32 GO eMMC, Mali-G72 MP3, Chrome OS) - Clavier AZERTY, Laptop Gris

Acer Chromebook Spin 311 CP311-3H-K63V Ordinateur Portable Tactile Convertible 11,6'' HD LCD, PC Portable (Mediatek MT8183, RAM 4 Go, 32 GO eMMC, Mali ...

  • CHROMEBOOK PLUS : Rapidité, fluidité des appels vidéo et grande capacité de stockage ; le Chromebook Spin 311, convertible et ultraportable, est conçu pour gérer tous vos cours et projets quotidiens ; le processeur Mediatek MT8183 avec Octa-core allie basse consommation et réactivité
  • ÉCRAN TACTILE : Conçu pour être utilisé dans des environnements très lumineux, l'écran tactile HD (1366 x 768) LCD de 11,6 pouces avec bordures fines vous permet d'apprécier des images vives et des couleurs éclatantes
  • PC PORTABLE CONVERTIBLE: Profitez pleinement de l'écran 11,6" de ce Chromebook: grâce à ses modes convertibles à 360 degrés, réalisez facilement des présentations ou partagez votre écran de manière pratique et collaborative
amazon
Non disponible
Patientez... Nous cherchons le prix de ce produit sur d'autres sites

Au début de l’Internet

Quand l’Internet s’est ouvert au grand public en sortant des universités et centres de recherche, mais surtout quand le Word Wide Web ou www à été créé en 1990 au CERN, il a fallu codifier l’affichage des données. C’est ce que l’on a appelé le HTML (HyperText Markup Language), fonctionnant au début avec les feuilles de styles (CSS), auquel a été rajouté ensuite le PHP (Hypertext Preprocessor). Ce sont trois langages de programmations simples qui peuvent être codifié soit à la main, soit par le biais de logiciels.

Pour définir grossièrement les pages HTML, on dit qu’elles sont statiques quand elles n’utilisent que le HTML et le CSS, ou dynamique quand le PHP est adjoint aux deux premiers langages. Ce dernier est un langage de programmation libre et orienté objet et une base de données doit lui être adjoint pour qu’il puisse aller chercher les données de celles-ci pour ensuite les afficher. Cela concerne autant du texte, images, vidéos ou tout autre information acceptée dans une base de données. 

Des pages web statiques

Suivant le site que l’on veut élaborer on pourra faire soit un site statique, soit un site dynamique. Ces deux possibilités se définissant à partir de la structure des pages, comme expliqué plus haut. Le premier peut être conçu pour une institution, une entreprise ou une ONG. Sachant qu’il s’agit là d’un espace dont les données inscrites ne sont pas modifiées ou très rarement, chaque page sera composé de HTML pour la structure et de CSS pour la mise en page. Sera adjoint bien sûr des images, vidéos ou autres supports numériques. Chaque page sera généralement créé entièrement et si une modification est à effectuer dans la mise en page du site, chacune d’elle devra être changée.

Comme on le constate ci-dessous, dans le code source d’une page statique, on voit que le texte qui sera lu s’affiche en dur donc qu’il n’est pas extrait d’une base de données. (Voir plus bas, ce que le lecteur verra.)

<!-- Content -->
										<h2 id="content">Sample Content</h2>
										<p>Praesent ac adipiscing ullamcorper semper ut amet ac risus. Lorem sapien ut odio odio nunc. .</p>
										<div class="row">
											<div class="6u 12u$(small)">
												<h3>Sem turpis amet semper</h3>
												<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. </p>
											</div>
											<div class="6u$ 12u$(small)">
												<h3>Magna odio tempus commodo</h3>
												<p>In arcu accumsan arcu adipiscing accumsan orci ac. Felis id enim aliquet. Accumsan ac integer lobortis commodo ornare aliquet accumsan erat tempus amet porttitor.</p>
											</div>

Des pages web dynamiques

Un site avec des pages web dynamiques s’adresse plutôt à des sites d’informations, avec des données nouvelles ou mises à jour régulières. Cela va concerner par exemple les commentaires d’un article qui vont être écrits par les lecteurs. On crée un masque contenant un mix de HTML pour la structure, du CSS pour la mise en page et du PHP pour l’extraction/affichage des données de la base de données. Un masque concernera la page article, un autre la page des rubriques, un concernant la page des résultats des recherches, comme pour le sommaire. Ainsi, un site peut avoir plus de mille articles en lecture et pourtant il n’y aura qu’un seul masque pour sa mise en page.

Pour chaque masque, on peut créer ce que j’appelle des briques, contenant un mix des trois langages (HTML, CSS, PHP). Elles viennent s’afficher dans certaines parties des masques par le biais d’une ligne de commande qui les appelle. Ainsi en modifiant le contenu de l’une de ces briques, on transformera l’ensemble des masques et par là même l’affichage. L’entrée de l’utilisation du PHP pour le grand public, a été la période ou les blogs ont connu un succès important, appelé aussi le Web 2.0. 

Il peut arriver, mais très rarement que des structures d’informations propose un mix de pages statiques et de pages dynamiques.  Cela va concerner par exemple des informations sur les personnes de la rédaction du site. 

Ci-dessous un exemple du code source d’une page dynamique avec du langage HTML et du langage PHP.

</HEAD>

	<BODY>

		<div id="bloc_page">
<?php

	function stripslashes_r($var) // Fonction qui supprime l'effet des magic quotes
	{
		if(is_array($var)) // Si la variable passée en argument est un array, on appelle la fonction stripslashes_r dessus
		{
			return array_map('stripslashes_r', $var);
		}
		else // Sinon, un simple stripslashes suffit
		{
			return stripslashes($var);
		}
	}

	if(get_magic_quotes_gpc()) // Si les magic quotes sont activés, on les désactive avec notre super fonction ! ;)
	{
		$_GET = stripslashes_r($_GET);
		$_POST = stripslashes_r($_POST);
		$_COOKIE = stripslashes_r($_COOKIE);
	}
				

	
?>
		</div> <!-- div bloc_page -->
	</BODY>
</HTML>

À quoi sert un serveur web ?

Un serveur web est un logiciel de ressource web, que l’on définira comme un serveur HTTP (Hypertext Transfer Protocol). Il fonctionne sur un ordinateur que l’on appelle un serveur. Il peut être positionné dans des fermes de serveurs à l’image des animaux dans un tel lieu ou accessible localement, c’est-à-dire sur un réseau interne. Dans les deux cas, l’accès peut être filtré par le biais d’identifiants, soit libre ou sectorisé. Un serveur web autorise l’entrée et sortie des données sur le port 80 dans le cadre du HTTP. C’est lui qui va permettre l’affichage des pages statiques ou dynamiques, après lui avoir indiqué le chemin des informations à afficher. 

Une ferme de serveurs web de Google au centre de données du comté de Mayes, dans l’Oklahoma aux USA

Que du HTML et du CSS

Comme il est impossible d’installer une base de données dans la structure même de Chrome OS, sauf en passant par un conteneur Linux, l’emploi du PHP est donc impossible dans le contexte d’un serveur web. Par contre, l’emploi du HTML et du CSS étant tout à fait autorisé, on peut installer un logiciel de ressource web sur le Chromebook pour une utilisation en local. Mais, avant de nous intéresser à son installation voyons à qui il s’adresse.

Chacun de nous peut à un moment donné avoir envie de raconter un voyage, une découverte ou que sais-je encore et vouloir que le monde entier le sache. On peut ainsi créer des pages statiques, puisque le vécu d’une journée d’un voyage par exemple ne changera pas le lendemain. Comme je l’ai dit, il faudra à chaque fois suivre la même mise en page, sachant en plus qu’il n’y aura pas de possibilités pour les lecteurs de laisser des commentaires. En installant un serveur web (HTTP) sur un Chromebook, on peut alors créer en mode hors ligne la page du jour par exemple, pour ensuite l’exporter sur le serveur web distant accessible à tous. On n’est donc plus ainsi tributaire d’une liaison ADSL pour la conception de la page, sachant qu’en plus on pourra reprendre son élaboration à tout moment.  

Ne pas se perdre en chemin

Un point important lors de la conception des pages statiques, il vous faudra écrire le chemin absolu et non relatif pour indiquer l’adresse d’une image. Pour cela, vous devrez avoir en mémoire le nom du dossier ou répertoire où sera stocké par exemple les images, sur le serveur distant ou s’affichera le site. Ainsi, lors de l’écriture du chemin d’une image, vous écrirez <img src=”/images/mon_image.png ” alt=”Mon image de vacance aux Bermudes”/>, ce qui est le chemin absolu. Le chemin relatif correspondant à un répertoire ou dossier de votre Chromebook  <img src=”Téléchargements/01/images/mon_image.png ” alt=”Mon image de vacance aux Bermudes”/>. Dans le deuxième cas, en envoyant la page statique au serveur web distant, il est certain que jamais l’image ne s’affichera. Je vous laisse deviner pourquoi.

Que des pages avec une extension html

Pour finir, lors de la conception de chaque page, il faudra avoir en mémoire que chacune d’elle aura l’extension .html, permettant ainsi d’être lue par le serveur web. On considère pour une bonne lecture que la page d’accueil est appelée index.html et se situera à la racine du site ou dossier contenant l’ensemble des pages et dossiers. Il en sera de même pour chaque page crée permettant ainsi d’avoir comme on l’a vu ci-dessus, toujours le même chemin relatif pour les images. Une clarté dans l’écriture des pages (chemin d’une image, etc…) doit permettre que celles-ci puissent être modifiées par tout autre personne si elle y a accès, sans avoir besoin d’une “boussole”. 

Utiliser en local un serveur web sous Chrome OS

Maintenant que nous avons vu brièvement le fonctionnement et l’élaboration des pages statiques, voyons comment installer le serveur web qui servira à les afficher localement sur le Chromebook. Je rappelle que cela permettra de visualiser les pages élaborées avant leurs envois, et ainsi éventuellement modifier le contenu. En aucun cas, il sera possible que des personnes à l’extérieur de votre réseau interne puisse venir les consulter. 

Installer et utiliser en local un serveur web sous Chrome OS
Logo de l’application Web Server for Chrome

L’application appelée Web Server for Chrome demande l’emploi du navigateur Google Chrome. Elle peut s’installer autant sur un Chromebook ou tout autre ordinateur à partir du moment où cet outil est installé. Pour effectuer l’installation cliquer sur le lien ci-dessous.

Web Server for Chrome
Web Server for Chrome
Développeur: chromebeat.com
Prix: Gratuit

Lors de l’installation, la fenêtre suivante s’affiche. 

Installer et utiliser en local un serveur web sous Chrome OS
La fenêtre d’information lors de l’installation

Cliquer sur Ajouter l’application et patienter. L’installation terminée, il suffira après un appui sur la touche Tout de taper dans la fenêtre “Web Serveur”, puis double-cliquer sur l’icône pour que l’application soit lancée. 

Utiliser le serveur web en local

Installer et utiliser en local un serveur web sous Chrome OS
La fenêtre lors de l’utilisation de l’application Web Server for Chrome

On constate que dans la fenêtre ci-dessus s’affiche http://127.0.0.1:8887/ (Web Serveur URL(s)). Elle correspondant à l’adresse locale du serveur web (localhost) installé sur le Chromebook. Le port indiqué est 8887.  Nous allons garder en mémoire cette information. Si nous ouvrons un navigateur Google Chrome et rentrons l’url http://127.0.0.1:8887/, nous verrons s’afficher cette information comme le montre l’image ci-dessous.

Installer et utiliser en local un serveur web sous Chrome OS
Affichage sans avoir indiqué un fichier html

Maintenant, nous cliquons sur le bouton Chose Folder (soit choisir le dossier), sélectionner le dossier contenant les fichiers HTML précédemment préparés. On relance l’application Web Server for Chrome et ouvre l’url  http://127.0.0.1:8887/ en indiquant le nom de la page que l’on désire voir s’afficher, ce qui donnera pour mon exemple http://127.0.0.1:8887/elements.html

Installer et utiliser en local un serveur web sous Chrome OS
Affichage après avoir indiqué un fichier html. La page comme elle s’affiche et dont nous avons présenté plus haut une partie du source

On constate que la mise en page est correcte. Il ne reste donc plus qu’à l’envoyer sur le serveur web distant via un outil de FTP. Pour le reste des commandes que propose cette application, je vous laisse les découvrir par vous-mêmes. Elles sont faciles dans la compréhension de l’utilisation.

Installer et utiliser en local sur votre Chromebook un serveur web sous Chrome OS

On vient de constater que le Chromebook permet simplement en utilisant Chrome OS d’installer un serveur web pour effectuer le contrôle sur la conception d’une page web statique. On peut comme je l’ai indiqué, se tourner vers le conteneur Linux si l’on veut utiliser un serveur web Apache autorisant la gestion d’une base de données. Mais, pour l’utilisateur lambda dans lequel je me reconnais, savoir qu’un contrôle en amont et en local, c’est-à-dire sans se soucier de la connexion Internet, permet de vérifier la bonne conception d’une page web est important. Si en plus, on peut l’effectuer sur un Chromebook et sous Chrome OS, ce n’est que du plaisir.

Que pensez-vous de cette application ? Allez-vous l’utiliser pour justement créer un site web ?

Si vous avez trouvé une faute d’orthographe, informez-nous en sélectionnant le texte en question et en appuyant sur Ctrl + Entrée s’il vous plaît.

Soutenir MyChromebook.fr

Chrome Os cache bien des secrets ! L’équipe de mychromebook.fr vous propose des guides d’aide au démarrage et à la manipulation de ce système d’exploitation.

Acheter nos guides

Le CKB SHOW est soutenu par ses auditeurs. Débloquez des avantages et rémunérez L’équipe de Mychromebook pour son travail avec Patreon !

Devenez VIP Tipeee

Découvrez notre podcast

Le CKB Show c'est le podcast qui parle de Chrome OS, de Chromebook et de tout l'univers de Google

Articles similaires

1 commentaire(s) au sujet de "Installer et utiliser en local sur votre Chromebook un serveur web sous Chrome OS"

  1. Je n’ai pas trop bien compris à quoi peut servir le serveur web dont vous parlez, vu qu’il n’affiche que des pages html, ce que le Chromebook réalise déjà avec son navigateur sans rien installer de supplémentaire.

    Perso, j’ai eu la nécessité de créer un programme en PHP pour des spectacles de récital texte/musique. permettant de synchroniser l’avancée du texte et la musique. je vais vous expliquer comment j’ai procédé

    -sur mon PC sous Ubuntu, j’ai installé un serveur Xampp (php, mysql, Apache), j’ai crée toutes les pages dynamiques grâce au php et la base de donnée mysql, je les ai ensuite, toujours grâce au php transformées en pages html (grâce aux fonctionnalités fputs, fopen, fclose… permettant au php de créer et manipuler des fichiers), ce qui m’a produit une multitude de petits fichers html (une centaine pour un texte d’une à 2 pages environ).

    -j’ai sauvegardé ces pages html sur un disque externe, puis je les ai transferrées sur le Chromebook. Ça fonctionne parfaitement. Ça fonctionne aussi sur plusieurs tablettes Samsung avec Androîd que j’ai, mais curieusement pas sur un smartphone Androïd car les liens entre les pages ne se réalisent pas.

    Vous parlez d’un serveur par l’intermédiaire de Linux. Xampp serait-il installable sur Chromebook? Je n’ai pas essayé car j’ai trouvé pour moi une solution sans rien installer, vu que mon appli web s’y prête. Cette solution ne serait pas possible pour toutes les appli web évidemment.

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Spelling error report

The following text will be sent to our editors: