Psycho@ctiF

Quelques mots sur moi

tout à commencé avec une Atari 26oo

Mon intéressement au monde des pixels a commencé sur Chopper Command le jour où mes parents ont acheté une Atari 26oo. Du coup cela vous donne une idée sur mon âge satisfaisons votre curiosité en vous avouant qu'en ce début 2o2o j'ai 33 hivers de passés. C'est pourquoi ajourd'hui, je décide faire d'un plaisir mon gagne pain. Non pas que mon domaine professionnel me déplaise, mais plutôt parce que je souhaite un avenir où mon travail serait une de mes passions.

Moi

Je sais que je ne sais rien

Dans le but d'y parvenir, je vais vous partager via github mon apprentissage avec un maximum de commentaires explicatif dans les codes afin de pouvoir informer de ma réelle évollution. Car on est d'accord c'est sympa de savoir faire Ctrl+C Ctrl+V... mais le but est de comprendre ce qui est copié afin de pouvoir le modifier et d'en faire un acquis.

Si en plus cela peut aider certains ou en motiver d'autres je serais ravis car je pars du principe qu'une des richesses de la vie est le Savoir, et que pouvoir le partager est tout aussi important.

Je vais donc commencer par cette page. Elle contient bien évidemment de l'html, du css ce qui est la base pour avoir une page statique viable, du javaScript pour le parallaxe par exemple et un peut de php pour l'envoie du mesage.
Pour le responsive ce sera <ici>.

Attention préparez vos mirettes, car j'espère bien vous éblouir 😏.

Pourquoi choisir un thème sombre..?
Pensons à notre 🌍
car 1 pixel éteint c'est 0 consommation.

The geek in me in graphic

GeeKries...

Ciné/séries

Jeux vidéo

Web Design

nO_ob

Quelques photos tirées de mon insta
clique dessus pour plus d'infos

Que contient cette page ?

Quatre langages sont utilisés ici;
l'html, le css, le php et le JavaScript

L'html

Pourquoi ces quatre langages ? Voyons ça un peu comme une rédaction interactive. Avant de la rédiger en forme vous allez faire un brouillon. Imaginez que celui-ci soit l'html, nous allons y écrire tout le contenu de la rédac. Les titres, sous_titres, paragraphes, photos etc... Chaque élément y est reconnu par des balises pour être ensuite interprété sous le bon état. Une image est déclarée comme ceci :
<img>
Il faut aussi référencer la route pour récupérer l'image et ensuite pouvoir l'afficher en incluant src="Le/Chemin/DeLimage.jpg" dans la balise.
Ce qui donne :
<img src= "Le/Chemin/DeLimage.jpg">

Le css

Une fois la rédaction écrite, on l'a dit c'est un brouillon donc, cela ne ressemble pas à grand chose. Il faut le mettre en forme... Dans l'exemple de la balise de l'image il faut donc l'informer de l'état d'affichage que nous souhaitons, en lui indiquant sa hauteur et sa largeur en pixel par un id.
Dans l'html
<img src=" " id=''exTaille''>
Et dans le css
.exTaille { width: 100px; height: 300px }
Nous pouvons rendre la page plus dynamique comme par exemple avec :hover qui se déclencherait au survol du pointeur
.exTaille:hover { opacity: 0.5 }
ici lorsque nous passons la souris sur l'image elle deviendra opaque à moitié, l'opacité étant comprise entre 0 et 1.

Le JavaScript

Le JavaScript va permettre de rendre encore plus dynamique votre ''rédaction interactive'' en appelant des fonctions qui peuvent réaliser bien plus qu'un simple :hover. Par exemple sur cette page un des codes JavaScript consiste à informer l'utilisateur que le formulaire d'envoi de message est conforme ou non, bloquant l'envoi de celui-ci jusqu'à ce que le formulaire soit entièrement validé. La fonction ci-dessous affiche le message "Formulaire incomplet" dans l'élément ayant l'id MesInfo si les valeurs renvoyées sont fausses. Pour ce faire, dans la balise du bouton validant, il faut rajouter onclick="envoyer()", qui permettra d'appeler la fonction lui étant liée.
Le code nous intéressant est :
function envoyer() {
if (LeNom == true && LeMail == true && LeMessage == true) {
     document.getElementById ('form_msg').submit();
     }
else {
     document.getElementById ('MesgInfo').innerText = "Formulaire incomplet";
}

Le php

Jusqu'ici nous n’agissons que sur la partie client c'est à dire, plus simplement, que tes informations traitées le sont que sur la machine de l'utilisateur. Vous l'aurez peut être compris le php permet donc d'envoyer ou de recevoir des informations depuis, vers d'autres machines. Le php est utilisé ici pour pouvoir envoyer un message sur une adresse mail depuis un formulaire.
<?php
$Expediteur = $_POST['Name']; //==> on récupérer le nom
$email = $_POST['Email']; //======> on récupérer l'email
$message = $_POST['Message']; //==> on récupérer le message

// on édite le message que contiendras l'email
$msg = "Vous avez reçu un message de: \t$Expediteur.\n";
$msg .= "Le voici:\n";
$msg .= "\"$message\".\n";
$msg .= "Pour lui répondre:\n";
$msg .= "$email\n\n";

$destinataire = "TonMail@xxx.xxx"; //==> on cré l'email de réception
$sujet = "Titre du mail"; //======> on cré le sujet du mail

$mailheaders = "From: $email $sujet de $Expediteur \n";
$mailheaders .= "Reply-To: $email\n\n";

mail ($destinataire, $sujet, $msg, $mailheaders);

echo "<HTML><HEAD>";
echo "<TITLE>Formulaire envoyé !</TITLE></HEAD><BODY>";
echo "<H1 align=center>Merci, $Expediteur.</H1>";
echo "<P align=center>";
echo "Ton message à bien été transmit à: $destinataire";
echo "<br><br>Il a reçu ceci:<br><br>$sujet<br><br>$msg</P>";
echo "</BODY></HTML>";
?>

ME CONTACTER

J'attends vos retours

Grenoble, France
Phone: +33 XXXXXXX33
Email: mail@mail.com

Toujours prêt à partager autour d'un , ou par message:

⚠ L'envoi du message doit vous amener sur une page 4o5 Not Allowed;
cela signifie que l'hébergeur utilisé, ici githhub, reconnait le format de la page mais ne le traite pas ( le format "PHP" reconnu par "MySQL" ). Donc l'envoi n'a pas aboutit.
Si vous souhaitez quand même le faire; je l'ai aussi hébergé <ici> sur 000webhostapp ne moyennant aucune demande pécuniaire, mais un petit "Powered By 000webhost" en guise de footer 😏.
Ou simplement en prenant mon mail plus haut ( lorsqu'il y sera ).

___   ___    ________    ___   ___  
|\  \ |\  \  |\   __  \  |\  \ |\  \  
  \ \  \\_\  \ \ \  \|\  \ \ \  \\_\  \  
     \ \______  \ \ \  \\\  \ \ \______  \  
        \|_____|\  \ \ \  \\\  \ \|_____|\  \  
                 \ \__\ \ \_______\       \ \__\  
                  \|__|  \|_______|        \|__|