Mon site web sur ma musique électronique

par | Oct 28, 2017 | Langages du web

Travail noté sur    /25

I ) Structure du site

a ) La page d’accueil

structure-page-accueil-HTML5

structure-page-accueil

Par exemple dans l’exemple ci contre il n’y a pas de partie ASIDE ou SECTION et il y a un seul article.

Le code HTML sera donc très simple

<html>
<head>  …….. <head>
<body>
       <header> ………… </header>
       <nav> ……. </nav>
       <articles > ….. </articles>
       <footer> ….. </footer>

 

b ) L’imbrication des balises entre elles

poupees-russes

Si on veux par exemple que :

Un lien soit à intérieur d’une phrase soulignée qui elle même est à l’intérieur d’un paragraphe indiqué comme important.

Le principe c’est celui des poupées russes.
On ferme d’abord les petites poupées avant de les rentrer dans une plus grosse …

Regardez le dessin ci-dessous pour savoir comment imbriquer les balises.

 

imbrication-pere-enfant

Une exemple de balises imbriqués, les listes

les-listes

liste-2

 

<ul> …. </ul> indique le début de la liste
et a l’intérieur <li> … </li> indique les éléments de la liste

On peut avoir une liste de textes ou une liste de liens hypertextes ou une liste d’images …
Dans ce cas on a encore d’autres balises imbriquées comme dans l’exemple ci-dessous ou les balises hypertextes <a href= » … « > … </a> sont imbriquées dans les balises <li> …. </li>

liste-3

Lorsque les listes avec liens hypertextes sont associés à des styles de présentation CSS on obtient des menus comme dans l’exemple ci-dessus.

 

c ) Ajouter des pages html supplémentaires conformément à la structure prévu pour votre site        /3

Vous avez déjà réalisé une carte mentale sur l’organisation des fichiers de votre site internet « musique électronique ».
Les dossiers et pages qui ne sont pas en rouge ont été réalisées par des élèves de 4ème des années précédentes, donc pas besoin de la refaire.
Vous pouvez directement remixer la page https://thimbleprojects.org/lossendiere/482150
Ou importer ces pages dans votre projet musique-electronique-site-eleve.zip

Important !!  N’oubliez pas de renommer votre projet Timble grâce à l’endroit prévu en haut à gauche
                         et mettez le nom « Musique électronique de (votre prénom) »

Ajout des pages

Dans l’onglet fichier vous avez le fichier index.html on a vu cela précédemment et aussi le fichier style.css
Regardez le contenu du fichier style.css, pour l’instant il y a seulement indiqué que le corps du texte (body) sera affiché avec la famille de police de caractère (font) Open Sans

Vous allez maintenant créer les pages html de votre site web, ajoutez une page HTML avec le petit + en haut à gauche.
Un deuxième fichier index vient de se créer, mais comme expliqué dans la vidéo précédemment il faut donner des noms explicites aux noms de fichier, comme il vous faudra une page concernant Léon Theremin, vous allez renommer le nom du fichier en leon-theremin.html
Attention
l’extension .html  ne doit pas être enlevée ou modifiée sinon la page ne pourra pas être affichée dans le navigateur.
Vous devez ajouter également un fichier evaluation.html  ( c’est dans ce fichier que votre professeur mettra votre note et les remarques pour améliorer le site )

II )  Le contenu et la présentation

Si vous regardez à l’intérieur du fichier index.html, leon-thermin.html et evaluation.html vous verrez des balises identiques
Notamment les balises de titre <h1>   </h1>

les-titres-h1

Les pages HTML peuvent être structurées avec ces balises h1 h2 h3 h4 pour les titres.

Quand un fichier CSS indiquera ensuite la présentation d’un type de titre ( h1 h2 … ) cette présentation pourra s’appliquer pour l’ensemble des pages du site web.

Quand toutes les pages d’un site internet ont les mêmes types de présentation on appelle cela une charte graphique.

d ) Vous allez maintenant mettre comme titre principal pour la page index.html {EPI Musique électronique}         /1
, comme titre principal pour la page leon-theremin.html {Léon Theremin}
puis enfin comme titre principal pour la page evaluation.html  {Evaluation}
Effacez ensuite les paragraphes dans les 2 pages « Make something amazing with the web! »

e ) Ajout de sous-titres et titre de d’article

Sur la page d’accueil il faudra au moins deux articles :       /2
Un article contenant votre lecteur soundcloud et ensuite un deuxième article ou vous expliquez comment vous avez créer votre œuvre musicale.

Il faudra donc créer dans la page d’accueil titre d’article « Ma création » puis pour le deuxième article « Ma démarche »
Pour la page évaluation, vous mettrez un sous-titre « Connaissances et travail effectué en cours de technologie »

 

f ) Associer au contenu un style

 Pour choisir le style à appliquer pour les titres principaux de vos pages, les titres d’article et sous titres, vous allez utiliser le site web http://liveweave.com/
,
pas besoin de créer un compte vous allez créer des feuilles de style en ligne et elles seront ensuite copiées collées dans le fichier de style de votre site avec Mozilla Timble

presentation-livewave
Le code javascript vous verrez plus tard, c’est cette fois ci de la programmation et permet de faire interagir et bouger des choses sur l’écran.

 

 

css-content-text

 

 

 

 

 

 

 

a ) Création d’un style pour le titre de page   /1

Vous allez maintenant créer un nouveau style en allant dans « CSS Explorer » puis commencez par la rubrique « Content and Text« 

Ecrivez de nouveau le titre de la page ( EPI musique électronique)
et modifiez la taille et la couleur de votre titre.

Observez le code de style CSS à droite qui se modifie en fonction de vos choix.

Testez les différentes possibilités
exemple-de-titre

 

 

c ) Ajoutez un style supplémentaire dans la feuille de style de Timble grâce à celui créer dans Liveveave       /1

affectation-codage-css

Regardez à l’intérieur de la feuille de style par défaut de timble.
style.css

le code css qui concerne les polices de caractère est dans des accolades après le terme body.
Cela veut dire que tout ce qui est dans les accolades concerne l’ensemble du corps du document.
On peut affecter un style à une partie du document, dans ce cas avant les accolades on lui met un nom (chapitre1 par exemple)
et dans le code HTML on entoure cette partie du document avec une balise spéciale qui aura le même nom que dans la feuille de style.

Si le nom du style correspond à un nommage connu du code HTML et qu’il concerne l’ensemble de ces éléments ce n’est pas la peine de créer une balise dans le code HTML.

Par exemple si vous écrivez dans la feuille CSS  h1 { color : red; ) h1 est déjà un code html qui concerne les plus grands titres ce n’est donc pas utile de le préciser dans le code HTML, et tous les titres des documents vont avoir automatiquement la couleur rouge.

Ou placer le code CSS de vos titres de page alors ?

Vous pourriez le mettre dans body { ………}   à la suite du code déjà existant
mais dans un but de clarté et afin de séparer les différentes étapes de votre travail vous allez ajouter
h1 { mettre ici le code css de liveweave }      —–> tous les gros titres h1 des pages html auront le même design

Indiquez aux pages html quelle feuille de style va être utilisée

Ajoutez à l'intérieur des balises <head>  .... </head> la ligne suivante
 <link rel="stylesheet" href="style.css" 

Elle va indiquer que c’est cette feuille de style qui devra être lu par la page HTML

Titre-large

Vous devez  apercevoir maintenant d’un petit problème, l’encadrement du texte occupe toute la largeur de la page et pas seulement la partie texte.
Pour remédier à cela ajouter la ligne suivante
display : inline;
à la fin du code css destiné au titres h1

Attention !!
les-daltons
Les titres auront des tailles différentes, indiqueront une importance plus ou moins grande. Mais ils seront tous sur des pages d’un même site internet, ils devront donc avoir un même air de famille.

Un peu comme les Daltons qui ont des tailles différentes, mais toujours les mêmes couleurs de vêtement.

Dans un site internet il faut que les couleurs soient harmonieuses et homogènes sur l’ensemble du site.

L’ensemble des règles qui indiquent quelles couleurs utiliser, les polices de caractères, les graphismes, la disposition des éléments sur les pages est appelée charte graphique.  Cette charte graphique ne se décide pas au fur à mesure de la création mais doit se décider au début d’un projet de site internet.

titre-synthese

 

  • Le Web est un des services d’internet, ce n’est pas le seul
  • Les liens hypertextes sont des parties de texte cliquables permettant d’accéder à d’autre documents.
  • Le langage de description des pages web s’appelle le langage HTML
  • L’ensemble des documents reliés par des liens entre eux forme le WEB (toile d’araignée)

     

    Une URL ( Uniform Resource Locator ) permet de localiser précisément une page web ( dans quel serveur ? de quel pays ? placé dans quel dossier ? … )  c’est la même chose qu’une adresse internet.

     

  • Le langage HTML est un langage de description lu par un navigateur (programme informatique)
  • Une page HTML doit pouvoir être affichée sur différentes tailles d’écran
  • Les images et autres documents ne sont pas à l’intérieur d’une page web mais s’affichent grâce à des liens
  • Le langage HTML permet de structurer la page et le style CSS permet de choisir une présentation
  • Une feuille de style CSS (présentation) est associée à une page Web

 

 III ) Ajouter des documents au site         /6

Il est important de connaître les langages du web, mais pour créer du contenu il existe des sites internet ou des logiciels qui permettent aux utilisateurs d’assembler rapidement du texte, des images, des graphismes de manière simple et rapide. Ces applications traduisent ensuite directement ce que vous avez préparé en codes ( HTML, CSS, Javascript … )

a ) Réalisez une infographie sur l’inventeur et musicien Léon Theremin

Qu’est ce qu’une infographie ?  c’est un document avec des graphismes qui permet de montrer de manière visuelle des informations.
Le document est numérique, il est préparé à l’aide d’un ordinateur, il peut être imprimé mais aussi affiché dans des pages web.
L’infographie peut être animée ou non en 2D ou 3D, la personne chargée de réaliser des infographies s’appelle un infographiste ou une infographiste. http://www.lesmetiers.net/orientation/p1_194078/infographiste

Pour faire ce travail vous allez vous inscrire sur le site internet https://piktochart.com/

Au moment de l’inscription vous préciserez que vous utilisez Piktochart dans un cadre scolaire, éducatif et que vous avez un profil élève.  Voici un tutoriel de piktochart que vous pouvez consulter.

Regardez cet exemple d’infographie réalisée avec Piktochart :
https://magic.piktochart.com/output/21958233-eddy-lamarr-et-georges-antheil

et le code HTML qui a été inséré dans la page « george-anteil.html »
<iframe width="800" height="968" frameborder="0" scrolling="no" style="overflow-y:hidden;" src="https://magic.piktochart.com/embed/21958233-eddy-lamarr-et-georges-antheil"></iframe>

ce code doit être placé dans la partie body de la page HTML

 

b ) Préparation d’une infographie 2d expliquant votre démarche de création        /3

En suivant l’exemple de cette page HTML https://thimbleprojects.org/lossendiere/253024/ma-creation.html

Préparez un document picktochart que vous insérerez dans le deuxième article de votre page index.html
– Les sons utilisés
– Source des sons
– Modification des sons
Dans la partie modification des sons vous devrez indiquer 
– Pourquoi ? dans quel but ? vous avez fait ces modifications

 

d ) Insérer une vidéo Youtube à la fin de page leon-theremin.html          /2

Vous allez ajouter une vidéo Youtube de votre choix pour montrer un exemple d’oeuvre musicale réalisée avec l’instrument de musique électronique Theremin.

Pour cela il faudra

1 ) Récupérez le code d’intégration de cette vidéo et placez le ensuite au bon endroit.
2 ) Ajouter un texte en dessous indiquant l’auteur de la vidéo avec un lien vers sa chaine Youtube

Exemple d’œuvre musicale qu’on peut trouver sur Youtube

 

IV ) Améliorez la page du projet d’accueil avec une liste        /4

Voici un exemple de liste

les-listes

liste-2

 

<ul> …. </ul> indique le début de la liste
et a l’intérieur <li> … </li> indique les éléments de la liste

On peut avoir une liste de textes ou une liste de liens hypertextes ou une liste d’images …
Dans ce cas on a encore d’autres balises imbriquées comme dans l’exemple ci-dessous ou les balises hypertextes <a href= » … « > … </a> sont imbriquées dans les balises <li> …. </li>

liste-3

Lorsque les listes avec liens hypertextes sont associés à des styles de présentation CSS on obtient des menus comme dans l’exemple ci-dessus.

Voici par exemple le fichier de style d’un menu que vous pouvez télécharger et modifier à votre gout : menu-vertical.css

 

 

IV ) Organiser ses documents web dans des dossiers pour plus de clareté       /2

Cette étape n’est pas obligatoire elle permet de séparer les différentes parties d’un site web dans des dossiers différents sur le serveur.

 

a ) Créer des dossiers pour ranger des documents

Vous pouvez par exemple créer un dossier ‘IMG »  IMG comme image pour mettre toutes les images, photos à l’intérieur et ainsi séparer les images de votre site du reste des fichiers (HTML, style). Cette organisation est recommandée lorsque vous avez un site internet avec beaucoup d’images.

 
ajouter-repertoire
Choisissez un endroit libre (zone noire) en bas des fichiers à gauche et avec un clic droit faire apparaître le menu contextuel.
Puis cliquez sur « Nouveau répertoire » (répertoire c’est synonyme de dossier en vocabulaire informatique)

Vous verrez apparaître un dossier IMG à gauche avec une petite flèche devant.

 
DEPLACER-IMAGE1
 
 

 

b ) Placez des images et des documents dans les dossiers

envoie-fichier
Cherchez grâce au web une image qui pourrait illustrer la page d’accueil de votre site internet et déplacez la dans le dossier IMG.

 

Imprimer