Archives des création - La programmation sur le web https://programmation.surleweb-france.fr/tag/creation/ La programmation gratuite pour tous Sun, 03 Apr 2022 08:39:33 +0000 fr-FR hourly 1 https://wordpress.org/?v=6.8.3 https://i0.wp.com/programmation.surleweb-france.fr/wp-content/uploads/2023/08/cropped-19518430-icone-de-programmation-pour-votre-site-web-mobile-presentation-et-conception-de-logo-gratuit-vectoriel.jpg?fit=32%2C32&ssl=1 Archives des création - La programmation sur le web https://programmation.surleweb-france.fr/tag/creation/ 32 32 176210735 Développement Web, les CMS https://programmation.surleweb-france.fr/developpement-web-les-cms/ https://programmation.surleweb-france.fr/developpement-web-les-cms/#respond Sat, 27 Nov 2021 17:48:00 +0000 https://programmation.surleweb-france.fr/?p=1238 Les CMS te permettront de publier ton site internet sans plus de connaissances mais voyons ce qu'est un CMS

Continuer la lecture

L’article Développement Web, les CMS est apparu en premier sur La programmation sur le web.

]]> A moins d’être un féru de PHP et HTML, la mise en place d’un site internet peut être fastidieuse, connaissance en langage de programmation, le mise en page, des scripts. Tout ses concepts peuvent être déroutant surtout si tu veux faire un site simple pour évoquer tes recettes de cuisine ou tout autre sujet que tu as envie de partager.

De plus, tu peux rapidement avoir des soucis pour la mise en page ou l’intégration d’outils si tes connaissances sont limitées. Limitées ne veut pas dire que tu es idiot, des personnes font de la programmation leur métier, ils vont étudier des années afin d’acquérir les compétences notamment pour créer et/ou administrer et/ou gérer le contenu d’un site internet.

Heureusement, des personnes pleines de bon sens et voulant se simplifier la vie ont créées les CMS pour Content Management System (pour les anglophiles) ou Système de Gestion de Contenu (SGC pour les francophiles !!!).

CMS, c’est quoi ?

Un CMS est un système de gestion de contenu, il va permettre de mettre à disposition un ensemble d’outils pour publier et gérer du contenu que ce soit la mise en page avec bien souvent des thèmes à foison mais aussi pour l’administration de la base de données (SGBDD), les actions sur celle-ci seront gérées par le CMS.

Les CMS vont également fournir (dans la majorité des cas), une gestion des utilisateurs que ce soit en tant qu’administrateur, auteur ou lecteur avec des droits qui leur seront propres.

Parmi les CMS les plus connus, on va retrouver :

Bien que ce sont tous des systèmes de gestion de contenu, ils n’ont pas tous le même objectif, WordPress sera plus orienté blog facile à mettre en œuvre avec l’intégration de plugins divers et variés (y compris pour y ajouter une petite plateforme d’e-commerce) alors que Magento sera bien plus orienté e-commerce.

Plus en détails

Cette partie n’est pas présente pour te dégouter, cela reste très intéressant à connaître, elle est simplement faite pour te montrer comment un CMS peut être utile.

Quelque soit le type de site internet que nous voulons concevoir, nous allons avoir besoin de compétences dans différents domaines. Pour la mise en page d’un site, qu’il soit statique (avec des pages qui ne se modifieront pas une fois chargées) ou bien dynamique (avec des pages ayant une interaction avec l’utilisateur même si celui-ci n’en a pas conscience).

Vous allez avoir donc besoin de connaître au moins le XHTML qui est un langage de description avec des balises :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Mon blog</title>
        <link href="style.css" rel="stylesheet" /> 
    </head>
        
    <body>
        <h1>Mon super blog !</h1>
<p>Derniers billets du blog :</p>


    <div class="news">
        <h3>
            Le PHP à la conquête du monde !            <em>le 20/09/2020 à 19h38min49s</em>
        </h3>
        
        <p>
            C'est officiel, l'éléPHPant a annoncé à la radio  hier soir &quot;J'ai l'intention de conquérir le monde&quot;.<br />
Il a en outre précisé que le monde serait serait à sa botte en moins de temps qu'il n'en fallait pour dire &quot;éléPHPant. Pas dur, ceci dit entre nous ...            <br />
            <em><a href="index.php?action=post&amp;id=1">Commentaires</a></em>
        </p>
    </div>
    <div class="news">
        <h3>
            Bienvenu sur mon blog !            <em>le 18/09/2020 à 10h12min00s</em>
        </h3>
        
        <p>
            Je vous souhaite à toutes et à tous la bienvenue  sur mon blog qui parlera de ... PHP, bien sûr !            <br />
            <em><a href="index.php?action=post&amp;id=2">Commentaires</a></em>
        </p>
    </div>
    </body>
</html>

Cette page aura le rendu suivant dans votre navigateur :

Exemple en ayant suivi un cours sur openclassroom

Pas très beau, n’est-ce pas ?

Pour lui donner un peu plus de forme, nous devons inclure du CSS. Le CSS permettra de faire la mise en forme des balises utilisées dans le code XHTML. Sans chercher à réaliser quoi que ce soit, voici un exemple en utilisant le code HTML précédent :

body{
  background-color: green;
  margin: auto
}
h1, h2, h3{
  text-align: center;
}
h1{
  font-size: 50px;
  color: red;
}
h2{
  font-size: 40px;
}
h3{
  font-size: 30px;
}

Cela donnera un rendu (moche) de ce type :

J’espère que malgré la pauvreté de cet exemple, tu comprends que les connaissances pour écrire son site sont importantes.

Maintenant, si tu veux en plus ajouter du dynamisme à ta page, tu auras besoin d’un langage de programmation, par exemple le PHP qui sera du côté serveur, le code HTML pourra être différent en fonction de l’internaute mais une fois la page chargée, le code ne bougera plus. Pour faire simple, si tu veux simplement créer un espace membre pour afficher le nom de l’internaute qu’il aura préalablement enregistrer, sur ton serveur, tu devras écrire les lignes pour :

  • créer un compte
  • se connecter au compte
  • afficher les données liées au compte

L’exemple suivant, provient du site Waytolearnx.com :

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<?php
require('config.php');

if (isset($_REQUEST['username'], $_REQUEST['email'], $_REQUEST['password'])){
  // récupérer le nom d'utilisateur 
  $username = stripslashes($_REQUEST['username']);
  $username = mysqli_real_escape_string($conn, $username); 
  // récupérer l'email 
  $email = stripslashes($_REQUEST['email']);
  $email = mysqli_real_escape_string($conn, $email);
  // récupérer le mot de passe 
  $password = stripslashes($_REQUEST['password']);
  $password = mysqli_real_escape_string($conn, $password);
  
  $query = "INSERT into `users` (username, email, type, password)
        VALUES ('$username', '$email', 'user', '".hash('sha256', $password)."')";
  $res = mysqli_query($conn, $query);

    if($res){
       echo "<div class='sucess'>
             <h3>Vous êtes inscrit avec succès.</h3>
             <p>Cliquez ici pour vous <a href='login.php'>connecter</a></p>
       </div>";
    }
}else{
?>
<form class="box" action="" method="post">
  <h1 class="box-logo box-title">
    <a href="https://waytolearnx.com/">WayToLearnX.com</a>
  </h1>
    <h1 class="box-title">S'inscrire</h1>
  <input type="text" class="box-input" name="username" 
  placeholder="Nom d'utilisateur" required />
  
    <input type="text" class="box-input" name="email" 
  placeholder="Email" required />
  
    <input type="password" class="box-input" name="password" 
  placeholder="Mot de passe" required />
  
    <input type="submit" name="submit" 
  value="S'inscrire" class="box-button" />
  
    <p class="box-register">Déjà inscrit? 
  <a href="login.php">Connectez-vous ici</a></p>
</form>
<?php } ?>
</body>
</html>

Pour dynamiser ta page sans la recharger, tu pourras aussi utiliser le javascript, il s’agit d’un autre langage de programmation qui peut être directement utilisé dans ton navigateur sans avoir à recharger la page, voici un exemple provenant de Outils-web :

<script language="JavaScript1.2">
/*
Source :  http://www.editeurjavascript.com
 Adaptation : http://www.outils-web.com
 */
/*dimensions de la box*/
ejs_scroll_largeur = 200;
ejs_scroll_hauteur = 100;
/*couleur du fond de la box*/
ejs_scroll_bgcolor = '#DDD';
/* chemin de l'image de fond */
ejs_scroll_background = "";
/* temps en secondes */
ejs_scroll_pause_seconde = 3;

ejs_scroll_message = new Array;
/* placez vos liens et messages ici*/
ejs_scroll_message[0]='<a href="lien 1" CLASS=ejs_scroll>message 1</a>';
ejs_scroll_message[1]='<a href="lien 2" CLASS=ejs_scroll>message 2</a>';
ejs_scroll_message[2]='<a href="lien 3" CLASS=ejs_scroll>message 3</a>';
function d(texte)
	{document.write(texte);}
	d('<DIV ID=ejs_scroll_relativ STYLE="position:relative;width:'+ejs_scroll_largeur+';height:'+ejs_scroll_hauteur+';background-color:'+ejs_scroll_bgcolor+';background-image:url('+ejs_scroll_background+')">');
	d('<DIV ID=ejs_scroll_cadre STYLE="position:absolute;width:'+(ejs_scroll_largeur-8)+';height:'+(ejs_scroll_hauteur-8)+';top:4;left:4;clip:rect(0 '+(ejs_scroll_largeur-8)+' '+(ejs_scroll_hauteur-8)+' 0)">');
	d('<div id=ejs_scroller_1 style="position:absolute;width:'+(ejs_scroll_largeur-8)+';left:0;top:0;" CLASS=ejs_scroll>'+ejs_scroll_message[0]+'</DIV>');
	d('<div id=ejs_scroller_2 style="position:absolute;width:'+(ejs_scroll_largeur-8)+';left:0;top:'+ejs_scroll_hauteur+';" CLASS=ejs_scroll>'+ejs_scroll_message[1]+'</DIV>');
d('</DIV></DIV>');

ejs_scroll_mode =1;
ejs_scroll_actuel = 0;
/* NE PAS MODIFIER*/
function ejs_scroll_start()
	{if(ejs_scroll_mode == 1)
		{ejs_scroller_haut = "ejs_scroller_1";
		ejs_scroller_bas = "ejs_scroller_2";
		ejs_scroll_mode = 0;}
	else
		{ejs_scroller_bas = "ejs_scroller_1";
		ejs_scroller_haut = "ejs_scroller_2";
		ejs_scroll_mode = 1;}
	ejs_scroll_nb_message = ejs_scroll_message.length-1;
	if(ejs_scroll_actuel == ejs_scroll_nb_message)
		ejs_scroll_suivant = 0;
	else
		ejs_scroll_suivant = ejs_scroll_actuel+1;
	if(document.getElementById)
		document.getElementById(ejs_scroller_bas).innerHTML = ejs_scroll_message[ejs_scroll_suivant];
	ejs_scroll_top = 0;
	if(document.getElementById)
		setTimeout("ejs_scroll_action()",ejs_scroll_pause_seconde*1000)	}
function ejs_scroll_action()
	{ejs_scroll_top -= 1;
	document.getElementById(ejs_scroller_haut).style.top = ejs_scroll_top;
	document.getElementById(ejs_scroller_bas).style.top = ejs_scroll_top+ejs_scroll_hauteur;
	if((ejs_scroll_top+ejs_scroll_hauteur) > 0)
		setTimeout("ejs_scroll_action()",10)
	else
		ejs_scroll_stop()}
function ejs_scroll_stop()
	{ejs_scroll_actuel = ejs_scroll_suivant;
	ejs_scroll_start()}
window.onload = ejs_scroll_start;

Pour finir cette partie, en reprenant un espace membre, tu auras besoin d’un base de données et de faire des requêtes pour lire des données s’y trouvant ou en inscrire de nouvelles, tu utiliseras certainement le langage SQL (oui encore un nouveau). Pour cela, tu auras besoin d’un SGBDD comme MariaDB ou bien MySQL :

INSERT INTO client (prenom, nom, ville, age)
 VALUES
 ('Rébecca', 'Armand', 'Saint-Didier-des-Bois', 24),
 ('Aimée', 'Hebert', 'Marigny-le-Châtel', 36),
 ('Marielle', 'Ribeiro', 'Maillères', 27),
 ('Hilaire', 'Savary', 'Conie-Molitard', 58);

Et alors ? Un CMS ?

Maintenant que tu as vu les connaissances (minimum) à devoir acquérir, tu comprends que pour mettre en ligne tes pages pour simplement les partager sans faire de toi un ingénieur informaticien, il sera plus simple d’utiliser un CMS qui te donnera tous les outils pour publier ton site.

Si l’on prend l’interface de WordPress, tu auras accès (via ton navigateur) à ce genre de page :

Page d’accueil
Création d’un article

WordPress se chargera de mettre en base de données tes articles ainsi que la mise en page grâce à l’ajout de thème et de plugin.

Pour ce qui est du rendu, je t’invite de finir la lecture pour voir les résultats possibles.

Quelques exemples

Site WordPress

Voici quelques sites utilisant les différentes solutions :

Walt Disney Company

News Microsoft

Site Prestashop

Le slip français

Naturabox

Je pourrais également faire de même pour l’ensemble des CMS, mais tu as saisi l’idée. Ces 5 solutions sont les plus répandues.

Conclusion

J’espère ne pas t’avoir détourner de l’apprentissage des connaissances utiles pour la création d’un site internet mais simplement t’avoir montré que la création d’un site peut être simple même pour une personne ne possédant de connaissance en langage informatique.

L’article Développement Web, les CMS est apparu en premier sur La programmation sur le web.

]]> https://programmation.surleweb-france.fr/developpement-web-les-cms/feed/ 0 1238 Home Assistant, création d’un Blueprint https://programmation.surleweb-france.fr/home-assistant-creation-dun-blueprint/ https://programmation.surleweb-france.fr/home-assistant-creation-dun-blueprint/#respond Tue, 04 May 2021 14:00:26 +0000 https://programmation.surleweb-france.fr/?p=938 La création d'un blueprint pour Home Assistant est aussi simple que de créer son automation et permet de gagner du temps dans le développement de sa solution domotique

Continuer la lecture

L’article Home Assistant, création d’un Blueprint est apparu en premier sur La programmation sur le web.

]]> Dans un de mes premier article sur Home Assistant, j’avais vu comment créer une automatisation en utilisant un blueprint, ensuite, j’ai montré, en utilisant en exemple l’allumage d’une lampe, comment créer une automatisation manuellement. Il est temps de montrer comment créer son propre blueprint. Le blueprint, via une interface graphique, va te permettre de sélectionner tes différents éléments pour la mise en place de l’automatisation sans avoir à aller coder dans les fichiers YAML.

La première question à laquelle je vais répondre est : « Pourquoi créer son Blueprint ? »

La réponse est des plus simple, j’ai fait un exemple pour allumer une lampe après la détection d’un mouvement entre deux heures, j’imagine qu’il n’y a pas qu’une lampe chez toi, le blueprint va te permettre de mettre tes automatisation en place plus rapidement, que ce soit pour des lampes, des capteurs, des interrupteurs …

Pour cet article, je vais reprendre l’exemple de l’automatisation créée précédemment :

- id: Light-with-mvt 
  alias: Lumière avec mouvement 
  trigger:
  - platform: state
    entity_id: binary_sensor.lumi_lumi_sensor_motion_81807f04_ias_zone
    from: 'off'
    to: 'on'
  condition:
  - condition: time
    after: "19:00:00"
    before: "07:00:00"
  action:
  - service: light.turn_on
    target:
      entity_id: light.lumi_lumi_light_aqcn02_c4865d04_level_light_color_on_off
    data:
      color_temp: 200
      brightness_pct: 25
  - wait_for_trigger:
      platform: state
      entity_id: binary_sensor.lumi_lumi_sensor_motion_81807f04_ias_zone
      from: "on"
      to: "off"
  - delay:
      seconds: 60
  - service: light.turn_off
    target:
      entity_id: light.lumi_lumi_light_aqcn02_c4865d04_level_light_color_on_off
  mode: restart
  max_exceeded: silent

Je ne vais pas revenir dessus, tu peux retrouver les informations sur cette page. D’ailleurs, je te conseille d’aller jeter un petit coup d’oeil, je me concentrerai seulement sur la partie de blueprint.

Explication

Je commence par fournir le blueprint, que je viendrai expliquer :

blueprint:
  name: Lumière activée par le mouvement entre 2 heures
  description: Allume la lumière quand un mouvement est détecté entre deux heures.
  domain: automation
  input:
    motion_entity:
      name: Capteur de mouvement
      selector:
        entity:
          domain: binary_sensor
          device_class: motion
    light_target:
      name: Light
      selector:
        target:
          entity:
            domain: light
    no_motion_wait:
      name: "Temps d'attente"
      description: Temps après le dernier mouvement pour éteindre la lumière.
      default: 120
      selector:
        number:
          min: 0
          max: 3600
          unit_of_measurement: seconds
	time_after:
	  name: "Heure du début"
	  description: "Heure à laquelle commence l'allumage de la lumière"
	  selector:
	    time:
	time_before:
	  name: "Heure de fin"
	  description: "Heure à laquelle se termine le déclenchement l'allumage de la lumière"
	  selector:
	    time:

mode: restart
max_exceeded: silent

trigger:
  platform: state
  entity_id: !input motion_entity
  from: "off"
  to: "on"

condition:
  - condition: time
  after: !input time_after
  before: !input time_before

action:
  - service: light.turn_on
    target: !input light_target
  - wait_for_trigger:
      platform: state
      entity_id: !input motion_entity
      from: "on"
      to: "off"
  - delay: !input no_motion_wait
  - service: light.turn_off
    target: !input light_target

Le fichier doit commencer par blueprint, afin de clairement faire comprendre à Home Assistant ce qu’il est. Ensuite, on lui donne un nom (name), une description (description) et un domaine (domain) :

blueprint:
  name: Lumière activée par le mouvement entre 2 heures
  description: Allume la lumière quand un mouvement est détecté entre deux heures.
  domain: automation

Dans la seconde partie, tu devras indiquer les entrées. Les entrées sont ce que tu devras saisir pour la mise en place de ton automatisation (capteur, zone, équipement, heure…). Pour chaque entrée, il faudra lui donner un nom (qui sera utilisé pour récupérer l’entrée), un sélecteur (selector) qui permet de définir ce qui sera affiché sur la création de l’automatisation pour cette entrée et les options de ce selector. Dans cette partie, nous ne renseignons pas les entités ou groupes :

input:
    motion_entity:
      name: Capteur de mouvement
      selector:
        entity:
          domain: binary_sensor
          device_class: motion
    light_target:
      name: Light
      selector:
        target:
          entity:
            domain: light
    no_motion_wait:
      name: "Temps d'attente"
      description: Temps après le dernier mouvement pour éteindre la lumière.
      default: 120
      selector:
        number:
          min: 0
          max: 3600
          unit_of_measurement: seconds
	time_after:
	  name: "Heure du début"
	  description: "Heure à laquelle commence l'allumage de la lumière"
	  selector:
	    time:

Dans la seconde partie du code, nous retrouvons nos déclencheurs, nos actions et nos conditions, les informations qui sont habituellement saisie sont remplacées par une phrase de ce type : !input no_wait_motion. Cela permet de signifier que cette entité sera l’entrée avec se nom (dans notre cas no_wait_motion).

Conclusion

La création d’un blueprint n’est pas plus compliqué que la création d’une automatisation, elle est à privilégier surtout si l’on sait que plusieurs automatisations y feront référence.

L’article Home Assistant, création d’un Blueprint est apparu en premier sur La programmation sur le web.

]]> https://programmation.surleweb-france.fr/home-assistant-creation-dun-blueprint/feed/ 0 938 Installer un serveur web complet https://programmation.surleweb-france.fr/installer-serveur-web-complet/ https://programmation.surleweb-france.fr/installer-serveur-web-complet/#respond Fri, 15 May 2020 17:00:00 +0000 https://programmation.surleweb-france.fr/?p=308 Pas à pas pour l'installation d'un serveur web complet prêt à l'emploi

Continuer la lecture

L’article Installer un serveur web complet est apparu en premier sur La programmation sur le web.

]]> Te voilà ici, certainement tu as décidé d’installer un serveur web sur ta machine.

Tu peux te retrouver dans cette situation (pas dramatique) parce que tu as choisi d’héberger ton site chez toi ou bien choisi un hébergeur où tu es maître de tout (voir l’article sur l’hébergement).

Avant que tu ailles plus loin, je te détaille sur quoi j’ai fait mon installation :

Le Raspberry Pi4 ne permet pas encore (à l’écriture de ces lignes) un fonctionnement complet sur un disque externe. En revanche, un démarrage sur la carte SD puis un basculement vers le disque dur est possible, ce qui rallonge grandement la durée de vie de la carte SD.

Tu pourras donc suivre cet article si tu souhaites créer un serveur sur un OS dérivé de Debian.

Cette page fait partie d’une suite d’article consacré à « Comprendre et créer un site Internet« .

Qu’est-ce-qu’un serveur web

On distingue deux types de serveur web :

  • le hardware qui sera une machine dédiée à stocker l’ensemble des fichiers qui compose un site
  • le software qui contient différents fragments qui contrôlent la façon dont les utilisateurs peuvent accéder aux fichiers hébergés. On trouvera a minima un serveur HTTP. Un serveur HTTP est un logiciel qui comprend les URL et le protocole HTTP (le protocole utilisé par le navigateur pour afficher les pages web).Vu sur Mozilla.org.

Ici, nous nous intéresserons au côté software.

Installation d’un serveur web complet

Il existe plusieurs serveurs ou configuration disponible. Pour ma part, j’ai choisi d’installer un LAMP pour Linux Apache2, MariaDB, Php (sachant que le M peut être pour MySQL et le P pour Perl).

L’installation se fait via le terminal soit en direct soit en SSH (qui sera certainement le cas).

Dans votre terminal, commences par une mise à jour de la liste des paquets et de ton système en saisissant :

sudo apt-get update && sudo apt-get upgrade -y

Ensuite, tu vas installer la base du LAMP (le serveur web complet pour Linux) :

sudo apt-get install apache2 php libapache2-mod-php mariadb-server php-mysql

SI tu souhaites installer mysql, tu remplaces simplement mariadb-server par mysql-server.

Pour compléter l’installation, je te conseille d’installer des modules supplémentaires notamment si tu compte utiliser un CMS comme WordPress :

sudo apt install php-curl php-gd php-intl php-json php-mbstring php-xml php-zip

Ton serveur est maintenant prêt, pour vérifier, dans ton navigateur, tape l’adresse suivante : http://localhost, tu dois voir apparaître :

Maintenant, il est temps de faire quelques petites choses, notamment niveau sécurité.

De manière optionnelle, tu peux installer PhpMyAdmin qui te permettra de gérer ta base de données via le navigateur :

sudo apt-get install phpmyadmin

Sécurisation

Apache2

Il s’agit surtout de protéger les informations qui peuvent être transmise à des petits malins. Le but étant de cacher des informations, en cherchant sur internet différentes solutions, celles remontées étaient déjà mise en place dans l’installation de base, dans le fichier /etc/apache2/conf-available/security.conf, modifies les valeurs :

  • ServerTokens en mettant Prod
  • ServerSignature en mettant Off

J’ai pris par habitude de restreindre tous les dossiers se trouvant dans la racine des sites d’Apache (sous debian, c’est /var/www), pour cela, toujours dans le fichier précédent, ajoutes :

<Directory />
     Order Allow,Deny
     Allow from all
     AllowOverride None
     Options -Indexes -ExecCGI -FollowSymLinks -Includes
     Require all denied
     AllowOverride None
</Directory>

Sécurisation de MariaDB

De base, MariaDB, lors de l’installation crée un utilisateur root sans mot de passe, ce qui n’est pas le plus sur.

Dans le terminal, saisir : 

sudo mysql_secure_installation

En répondant Y (oui) à toutes les réponses, tu auras un système bien plus sécurisé, mais dis-toi que ce ne sera jamais assez face aux petits malins et surtout, la première source d’erreur, de fuite, se situe entre le clavier et la chaise.

Conclusion

Si tu as suivi cet article, tu as fait un pas de plus à la mise en ligne de ton site.

Il existe d’autre serveur http tel Nginx et d’autres gestionnaire de base de données, mais j’avoue que j’ai l’habitude d’être sur Apache et MariaDb, côté langage de programmation, j’aime beaucoup PHP mais ce n’est qu’un avis personnel.

L’article Installer un serveur web complet est apparu en premier sur La programmation sur le web.

]]> https://programmation.surleweb-france.fr/installer-serveur-web-complet/feed/ 0 308 Le nom de domaine https://programmation.surleweb-france.fr/nom-de-domaine/ https://programmation.surleweb-france.fr/nom-de-domaine/#respond Thu, 14 May 2020 17:00:00 +0000 https://programmation.surleweb-france.fr/?p=283 Le nom de domaine est la vitrine de ton site, y réfléchir est primordial, le réserver et l'acheter se fait facilement. Le plus dur est de le choisir.

Continuer la lecture

L’article Le nom de domaine est apparu en premier sur La programmation sur le web.

]]> Cet article fait parti de la suite « Comprendre et créer son site internet« , si tu aimes la lecture, je t’invite à t’y rendre.

Cette partie sera certainement la plus courte, j’aborderai donc la notion de référencement (SEO).

C’est quoi le nom de domaine ?

Si tu as lu la page sur la présentation d’internet, j’ai commencé à aborder le nom de domaine pour te rafraîchir la mémoire, tu peux retrouver la page ici.

Le nom de domaine correspond à ce que le visiteur saisi dans la barre d’adresse. Il s’agit d’une adresse compréhensible par le visiteur, celle-ci sera transformer en adresse IP par un serveur de nom de domaine afin d’atteindre l’hébergement du site en question.

Acheter un nom de domaine, permettra d’enregistrer le nom et avec le vendeur du domaine, de faire inscrire dans cette annuaire la relation entre ton adresse IP et le nom.

Le nom de domaine est composé de :

Ce qui laisse libre-court à ton imagination. Chaque élément est séparé par un « . ».

Nom de domaine et référencement

Même si le nom de domaine n’est pas relié directement au référencement, celui-ci reste une des premières choses lues (vues) par le visiteur. En terme de crédibilité, de pertinence, il est important que ce nom corresponde à ce que le site propose.

Le placement de mot clé ne semble pas avoir une incidence directe sur le référencement.

En revanche, les moteurs de recherche qui référencent votre site, se basent sur le nom de domaine. Avoir un nom de domaine pertinent (donc bien pensé dès le début est important). Si ton site commence à avoir une réputation et que tu décides de changer le nom de domaine, si la migration vers le nouveau nom n’est pas correctement faite, tu risques de perdre la notoriété durement gagnée.

Voir l’article sur afnic.fr.

Où acheter un nom de domaine

Sur Internet évidemment en particulier grâce à un bureau d’enregistrement. Quelque soit le site, ton nom de domaine, avant même d’être accepté, sera vérifié.

De la même manière que je ne vais pas vous proposer un top qui pourrait être totalement faussé, je vous invite à aller sur google et chercher « Acheter un nom de domaine », n’hésites pas à comparer les prix, pour t’aider à déterminer l’extension que tu souhaites (cela peut faire varier les prix), je t’invite à suivre de ce lien.

Toujours à titre informatif et si tu souhaites participer au site indirectement, je suis chez Ionos, voici un lien de parrainage. Le nom de domaine fait parti d’un pack hébergement.

Conclusion

Le nom de domaine est plus une vitrine, évites d’utiliser des mots clés, ceux-ci seront trop limités en fonction des recherches que les internautes pourraient faire. Privilégies de choisir une marque (ta marque).

Les différents sites sur lesquels tu pourras acheter n’ont pas réellement d’importance, en revanche, il peut être inclus dans un pack qui lui sera intéressant.

L’article Le nom de domaine est apparu en premier sur La programmation sur le web.

]]> https://programmation.surleweb-france.fr/nom-de-domaine/feed/ 0 283 Comprendre et créer son site internet https://programmation.surleweb-france.fr/comprendre-creer-site-internet/ https://programmation.surleweb-france.fr/comprendre-creer-site-internet/#respond Mon, 11 May 2020 17:00:00 +0000 https://programmation.surleweb-france.fr/?p=247 La création de site internet passe par de nombreuse étapes, avant de commencer, il est important de comprendre comment cela fonctionne, l'environnement du web et quoi mettre en place

Continuer la lecture

L’article Comprendre et créer son site internet est apparu en premier sur La programmation sur le web.

]]>

Cette page sera vivante, il se peut que tous les articles ne soit pas encore disponibles, alors n’hésites pas à t’abonner soit par la newsletter, soit par les réseaux sociaux. Si tu vois qu’un article manque(ra), n’hésites pas à le dire en commentaire.

Zigomato

En venant sur ce site, j’imagine que tu as dans l’idée de mettre en ligne (sur le web ou localement) un site internet. La mise en ligne et la conception peut être très simple, encore faut-il savoir comment s’y prendre. Tu verras qu’en quelques minutes, un site peut être publié mais avant de se lancer dedans, il est important de comprendre ce qu’il faut et connaître les mécanismes d’internet (dans les grandes lignes).

A la fin de cet article tu seras en mesure d’avoir ton propre site mais pour cela et pour que ce soit plus digeste (j’ai pas une plume des plus légères), j’ai découpé le sujet en plusieurs parties.

Chacune aura son intérêt, peut être facultative mais te donnera une idée générale.

Je n’ai pas pour objectif de révolutionner le sujet, mais j’essayerai d’amener un maximum d’informations.

Internet ? C’est quoi au juste?

Internet est un outil du quotidien, tellement quotidien que l’on oubli qu’il n’a pas toujours existé, la première partie t’amèra sur cette page.

Pour lire l’article, je t’invite à suivre ce lien.

Hébergement local ou extérieur ?

Tu devra faire un choix, faire héberger ton site chez un hébergeur ou bien l’auto-héberger. Les deux ont leurs avantages et inconvénients.

En fonction de tes besoins, tu verras que ton idée initiale n’aura pas été la meilleur.

L’article est visible sur cette page.

Un nom de domaine

Que tu sois hébergé à l’extérieur ou chez toi (je parle de ton serveur), tu aura certainement besoin d’un nom de domaine, si tu as lu la première partie, tu sauras. Malheureusement, ce nom de domaine aura un coût (ne t’affole pas, il sera faible).

Plus d’explication dans cet article.

Un serveur web

On progresse, tu as ton hébergement, ton nom de domaine, maintenant, il est temps d’avoir ton site …, je m’emballe, avant cela, il te faut un serveur web.

Pour ma part, je vais te montrer comment installer un serveur web chez toi à base Apache, MariaDB et PHP, en plus, on installera PHPMyAdmin.

En général, les hébergements extérieurs proposent déjà des installations cela fait parti des avantages comme des inconvénients.

Je t’invite à suivre ce lien, si tu veux en découvrir plus, lien.

La création du site

On y vient enfin, tu auras le choix de produire un site de A à Z ou bien d’utiliser un CMS comme WordPress, en fonction de ton niveau mais également du temps disponible et du genre de site que tu veux faire, le choix t’appartient.

Voici deux articles qui te montreront les outils nécessaires pour faire ton site :

  • avec WordPress
  • à la dure, en codant tout ton site.

Pour en lire plus, suivre ce lien.

Le référencement (facultatif)

C’est bien ton site est en ligne, encore faut-il le faire connaître. Le mettre en bonne place dans un moteur de recherche est un sacerdoce. Plein de règles plus ou moins défini, des outils et surtout de la patience.

Pourquoi ai-je mis que c’était facultatif ? Tout simplement parce que tu ne souhaite pas obligatoirement avoir un site en tête de recherche, il s’agit peut-être d’un site pour ton usage personnel mais accessible de partout (dans ce cas, même le nom de domaine n’est pas indispensable)

La page est enfin accessible à cette adresse.

La rémunération (facultative)

J’ai bien préciser dès le titre du chapitre, la rémunération de ton site est facultative, cela ne fera pas mieux fonctionner ton site.

Il serait même extraordinaire que tu puisses en vivre, même si c’est tout le mal que je te souhaite.

Pour voir l’article, suivre ce lien.

La veille (toujours facultative)

Bannière feedly
Bannière feedly

La veille te permettra de te tenir à jour sur le thème de ton site, bien sûr, il se peut que cela ne soit pas nécessaire, mais la veille peut te permettre aussi de trouver des idées originales ou d’actualités à publier.

L’article pour la création de son système de veille est sur cette page.

Conclusion

En arrivant à la fin de cet article, tu devrais être armé pour créer toi même ton site.

N’hésites pas à partager cette page et surtout à faire des commentaires, sur une partie qui te sembles importante et que j’aurai totalement mise de côté.

L’article Comprendre et créer son site internet est apparu en premier sur La programmation sur le web.

]]> https://programmation.surleweb-france.fr/comprendre-creer-site-internet/feed/ 0 247 Sélection des banques d’images gratuites https://programmation.surleweb-france.fr/selection-des-banques-dimages-gratuites/ https://programmation.surleweb-france.fr/selection-des-banques-dimages-gratuites/#respond Sun, 03 May 2020 17:00:00 +0000 https://programmation.surleweb-france.fr/?p=95 Lors de la rédaction des pages de ton site, la mise en place d’images de qualité reflétera le sérieux que tu apportes à ton site et tes lecteurs. Ce sont les premières choses qui sautent au yeux lors de la navigation. Parce que c’est un site 100% amateur et pour...

Continuer la lecture

L’article Sélection des banques d’images gratuites est apparu en premier sur La programmation sur le web.

]]> Lors de la rédaction des pages de ton site, la mise en place d’images de qualité reflétera le sérieux que tu apportes à ton site et tes lecteurs. Ce sont les premières choses qui sautent au yeux lors de la navigation.

Parce que c’est un site 100% amateur et pour lequel, le seul budget que j’y consacre est destiné au nom de domaine ainsi qu’à la consommation électrique. Il est hors de question de mettre en ligne des photos qui ne soient pas gratuites. Le but du site est également de proposer des astuces ou des liens qui ne nécessite pas de débourser un sous (sauf les liens vers des produits en relation avec les articles).

Obtenir des photos est simple, tu pourras en trouver plein sur internet mais leur recherche s’avère parfois être compliqué.

Certaines de ces banques te proposeront un téléchargement direct, d’autres nécessiteront une inscription gratuite.

Pour les banques en langue anglaise, tu devras faire un petit effort sur les mots clés et trouver la traduction correspondant le mieux pour cibler correctement.

Pourquoi utiliser des images gratuites et libre de droit ?

Mise à part le côté financier qui est d’acheté des images, il est important de respecter les droits d’auteurs et même si ton site ne viendra pas concurrencer les grandes maisons.

Une image qui n’est pas libre de droit peut vous exposer à des sanctions, les moins grave seront des pénalités dans le référencement (même si cela est dommageable) et cela peut aller jusqu’à des poursuites judiciaires

Conseils et bonnes pratiques

Voici quelques petits conseils quant à l’utilisation des médias pour votre site (source sur commentcamarche.net)

  • Opter, dans la mesure du possible, pour la création et la diffusion de vos propres œuvres : pour promouvoir votre savoir-faire dans un domaine précis, générer du trafic vers votre site web grâce des travaux apportant une valeur ajoutée, ou réseauter. Vous pourrez également exercer votre propre droit d’auteur sur l’oeuvre créée, lui attribuer une licence d’utilisation, etc.
  • Toute oeuvre est soumise au droit d’auteur, même si aucune mention ne l’indique expressément. La réutilisation d’œuvres originales par des sites web tiers -ayant ou non l’autorisation de les utiliser- n’affranchissent pas du respect du droit d’auteur pour tout autre utilisateur. Théoriquement, aucune oeuvre ne peut être utilisée sans l’autorisation de son créateur.
  • Être attentif aux codes de la propriété intellectuelle : le signe ©, les mentions « Copyright », « Tous droits réservés », ou « all rights reserved » doivent alerter, même si, en France, celles-ci ne sont pas nécessaires pour garantir la protection d’une oeuvre.
  • Demander à l’auteur l’autorisation d’utiliser son oeuvre : il est préférable d’utiliser cette oeuvre si une licence lui est déjà attribuée. En effet, si les droits de reproduction et de représentation peuvent être cédés à des tiers, la procédure requiert la signature d’un contrat entre les deux parties (voir ici un modèle de contrat de cession de droits d’auteur)
  • En cas de partage d’une oeuvre sur ou via un réseau social (ex : Youtube, Pinterest), utiliser l’URL source, provenant du site/blog ayant les droits sur celle-ci.
  • Ajouter, dans la charte d’utilisation des réseaux sociaux de l’entreprise, un paragraphe de bonnes pratiques et précautions concernant l’utilisation d’œuvres protégées pour les collaborateurs actifs sur le web (activités de blogging, etc.)

Afin de vous astreindre de demander systématiquement l’autorisation à l’auteur (ce qui peut être un casse-tête en particulier à cause de google image), des sites mettent à dispositions des images libres de droits.

La sélection des banques d’images

Rentrons dans le vif du sujet, tout d’abord, cette sélection est subjective. Le choix est fait selon mes habitudes de recherche.

VOIlà ma petite sélection, j’espère que cela pourras t’aider ou te simplifier. Sache qu’il n’y a pas vraiment de bonne ou mauvaise banque, je te conseille de bien choisir ton mot clé et d’en essayer plusieurs.

L’article Sélection des banques d’images gratuites est apparu en premier sur La programmation sur le web.

]]> https://programmation.surleweb-france.fr/selection-des-banques-dimages-gratuites/feed/ 0 95