Le web pour les nuls / un site pour ton groupe

Astuces css, coups de pouces php, et bricolages html en tous genres... DIY ton web !
Répondre
Avatar du membre
abFab
Administrateur
Administrateur
Messages : 791
Enregistré le : 27 août 2003 19:12

Le web pour les nuls / un site pour ton groupe

Message par abFab » 05 févr. 2015 19:43

<préambule tartino-politique>

Histoire de se concentrer sur le bricolage, j'ai déplacé le préambule explicatif >ici<

</fin du préambule tartino-politique dispensable>

Aujourd'hui, au vu du web ambiant, il peut apparaitre insurmontable de faire son propre site, même à ceux qui sont de bonne volonté.
Et pourtant, malgré tous leurs efforts, les technocrates du web n'ont pas encore flingué le html. Donc on peut encore et toujours faire des sites sympas, rapidement, avec une poignée de codes.

Mais je préviens direct les ayatollahs du W3C... allez vous faire cuire le cul. Je me carre de vos recommandations, certes pertinentes pour les experts, mais totalement excluantes. On va faire du html hardcore, old school et bien dégueu, mais tellement jouissif.


Amis camarade préposé au site web de ton groupe, écoute-moi.

Pour faire un site, il te faut 3 choses :


- Un hébergement (ça on peut pas y échapper, pour être visible sur internet il faut envoyer tes données sur un serveur, il te faut donc de quoi les héberger... on y reviendra dans un topic dédié, mais en général il suffit de demander sur n'importe quel forum, ici ou ailleurs, et tout plein de gens sympates te fileront tout plein de tuyaux) + Un nom de domaine. On y reviendra aussi, mais il ya quand même pas mal de groupes, asso etc qui ont du refaire tous leurs flyers, tracts, et autre matos de propagande parce qu'ils/elles ont changé d'hébergeur. Avec un nom de domaine http://www.mongroupe.net , t'es sûr de jamais être emmerdé (et tu perdras pas tes années de référencement, sur g**gle, mais aussi comme lien chez d'autres groupes, asso etc...)

- Du matos propre à ton groupe : une bannière, du son (quelques mp3/ogg pour débuter, inutile de surcharger), des photos (concerts, répètes), un texte de présentation (qui, quoi, où) (je t'assure, c'est pénible de visiter le site d'un groupe et de pas savoir d'où il vient, comment les membres caractérisent eux-même leur zique, etc), une adresse mail de contact (et éventuellement une adresse postale).

- Une page blanche. Ou deux, on sait jamais...

S'il te manque des éléments, c'est pas bloquant, tu peux continuer, mais saches que tu risques de t'énerver à un moment ou un autre...

Ensuite, tu peux essayer de te lancer directement dans l'édition de site en mode Notepad (je te conseille toutefois le notepad++ qui colorise les balises html)... mais on va commencer avec BlueGriffon, que tu peux télécharger >ici<.

<aparté>
Note perso : moi j'utilise Seamonkey comme navigateur. C'est en fait une suite de logiciels (kikipédiaexplique tout ça) qui propose un éditeur de page web qui est un peu plus rustique que BlueGriffon, mais qui fait le job. N'hésitez pas à tester et à indiquer vos préférence en commentaire à ce billet.
</aparté>


Maintenant pour faire un site web pour un groupe de musique, il faut quoi comme rubrique ?
- une présentation (trèès important)
- "actu" pour parler de ta démo, de ton album en préparation ou autre...
- "photos"
- "concerts"
- "sons" (quelques mp3/ogg pour commencer)
- "videos" (éventuellement)
- "contact"

Tout cela pourra être étoffé plus tard. Mais, en gros, un site web pour un groupe, c'est un lieu un peu figé (les actu d'un groupe ce sont en général les sorties de disques et les annonces concerts), qui permet à un visiteur de choper l'ambiance, d'écouter de la zique, de trouver les dates des prochains concerts, tranquille, sans bling bling publicitaire, sans foutoir annexe.

Donc, toi, qui est là devant ta page blanche et qui sait pas trop comment démarrer, je te proposes de commencer ton site en mettant tout sur une seule page web et de mettre une "ancre" pour chaque rubrique (quand tu vas cliquer sur le lien "actu", la page va défiler jusqu'à trouver l'ancre appelée "actu").

Comme template ça donne ça :
http://contre-choc.net/webnuls/template_01/

Chaque menu renvoie à une rubrique à l'intérieur de la page.
Tu peux télécharger le keutru ici:
http://contre-choc.net/webnuls/webnuls_template_01.zip

Sur ton pc, tu te fais un répertoire "SITE_WEB" et tu dezippes dedans.
Ca donne ça :

Image
Tu peux cliquer sur le fichier "index.html", il va t'afficher la page dans ton navigateur par défaut (évite explorer, vraiment).

... et maintenant il ne te reste plus qu'à ouvrir ce fichier "index.html" avec BlueGriffon et à l'adapter pour ton groupe.

BlueGriffon est un editeur de pages html wysiwyg, cela signifie que ce que tu vois, c'est ce que tu obtiendrais si tu sauvegardais la page. Autrement dit, lorsque tu fais des modifications dans la partie "Code source", tu vois immédiatement le résultat final dans la partie "page web".
Ce fichier "index.html" qui est basique, est suffisant dans un premier temps pour te permettre de tester, de modifier des champs autant grâce aux menus de BlueGriffon qu'en allant directement modifier dans le "code source".

Il n'existe pas de méthodes plus judicieuse qu'une autre pour fabriquer une page web, donc pas de procédures figées pour te prendre par la main et t'emmener vers demain... mais il existe des forums pour poser des questions, même celles qui semblent les plus con.


___________________________________________________________


!! Note importante concernant la rubrique musique !!
Le morceau "titre1" se trouve en double, au format "ogg" ET au format "mp3". C'est pour assurer sa lecture sur tous les navigateurs, tout en se passant de la technologie propriétaire flash.
Ceci est expliqué dans un autre topic (voir "lire un seul morceau") :
viewtopic.php?f=21&t=16130

==> Chaque titre devra être mis au format ogg et au format mp3 dans le répertoire "sons".


!! Note importante concernant la rubrique vidéos !!
Pour ce qui est de la vidéo, ça ne marchera avec la balise <video> que si tes vidéo sont au format mp4/H264.. la grande majorité des outils qui permet de générer des clips pour le net permet de de le faire dans ce format, mais c'est mieux en le précisant.



:pirate:
bla bla bla
http://blog.abfab.ninja

(a)social
Mastodon : https://mstdn.io/@abFab


"Messieurs, j'ai refait tous les calculs. Ils confirment l'opinion des spécialistes : notre idée est irréalisable. Il ne nous reste qu'une chose à faire : la réaliser." (Latécoère)

Répondre

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 1 invité