Bootstrap : Collection d’outils utiles à la création du design de sites et d’applications web.

Free Bootstrap Templates : templates pretent à l’emplois pour Bootstrap

Font Awesome : Icônes pour bootstrap.

Bootstrap Galerie : pour bootstrap.

AngryTools : Generateur (bootstrap, css, dégradé, animation, etc. et pleins d’autres).

Templates

Web-soluces Templates de menu

HTML5 UP Template free

Générateur :

Website Planet : Créateur de lien de partage sur les réseaux sociaux

Fontello : Générateur et banque d’icônes

AppLaunchpad : Générateur de mockup gratuit

Smartmockups : Générateur de mockup gratuit

MockupPhotos : La plus grande place de marché pour les mockups gratuits en ligne

MockupWorld : Fichiers PSD photo-réalistes entièrement customizables, gratuits et légaux

Convertisseur, compresseur :

Pdf-convertisseur.fr : Compress vidéo en ligne gratuitement.

TinyJPG : Compresse les images JPEG et PNG.

Banque d’images, polices :

Google Fonts : collection de polices Web open source.

Pixabay : Banque d’images libre de droit.

Galerie en ligne avec retaillage d’image, perso.

Freepik : Vecteur ressources graphiques.

Vecteezy : Vecteur ressources graphiques.

Langage, code :

Caractères spéciaux et entités HTML : Codage de caractères spéciaux en HTML

Caractères spéciaux : Ranger par lettre

Unicode utf8 : Unicode symbole.

Propriétés CSS :Classement des propriétés CSS par familles.

Raccourcis et astuces Emmet : Rappel des raccourcis principaux.

La version n’est encore pas définitive, mais le travail avance. Lorsque le stage sera fini le contenu aura peut-être un peu plus d’intérêt. Mais ceci dit, en avant première…..

Ici… le liens pointant vers le portfolio.

Pour les tutos c’est par ici.

Pour les titres depuis 2017, ceci son rebaptisés: Titrage hérité, dans Fichier – nouveau.
Nous pouvons également utiliser Photoshop pour créer et incorporer un titre ou un logo, en passant par: fichier – nouveau – fichier photoshop. Par la suite pour modifier ce logo nous pouvons le faire avec un clique droit – Modifier dans Adobe Photoshop, sur le logo dans la fenêtre de montage.

Raccourci important:

Pour afficher un plans (fenêtre) de travail en grand ou le restorer utiliser la touche:  ù

Pour raccourcir, dans la fenêtre de montage,  un rush par la fin et faire revenir se coller les autres rushs, il est possible de le faire en une seul fois en utilisant la touche:  w  (à vérifier sur la nouvelle version).

La même chose mais au début du clip avec la touche:  q  (à vérifier sur la nouvelle version).

Pour permuter deux rushs il faut, tout en ayant actionné le magnétisme, sélectionner le rush et tout en appuyant sur:  alt + cmd (pour mac) le faire  glisser à l’endroit désiré.

Pour afficher un projet existant dans la fenêtre de montage:

Après avoir affiché le projet dans l’explorateur de média, basculer en mode liste (logo en bas à gauche) puis double cliquer sur le carré à gauche de la séquence.

Exemple:

A savoir: pour animer un personnage il faut absolument le convertir en symbole.(movie-clip) (interpolation de mouvement)

Pour les formes, une interpolation de forme sans conversion.

Également:

shift F5 supprime une image (la ligne de temps diminue)

shift F6 supprime l’image clef.

Pour animer un élément:

• Cliquer sur la « timeline » au niveau de la duré souhaité pour définir la duré. Un rectangle jaune apparait. (si plusieurs, cliquer glisser)
• aller dans, insertion, scenario, image ou F5.
• Pour l’élément en mouvement, cliquer sur la ligne correspondant et insertion, interpolation de mouvement.
• Placer le curseur sur la première image et placer celle-ci au point de départ de votre animation.
• Déplacer le curseur sur la dernière image et placer celle-ci à la fin de votre animation

Un avion:

• Concevoir l’avion et le convertir en symbole.
• Faire une ligne guide (à la plume) sur un autre calque et dans ces propriété convertir en guide.
• Placer l’avion (son point central) sur la ligne guide.
• Placer le calque de l’avion sous et collé au calque trajectoire(légèrement décalé).
• Cliquer sur la ligne(timeline) avions et créer une interpolation.
• Comme dans le premier exemple, placer le curseur et l’avion au début et idem pour la fin.
• Cliquer ensuite sur le calque avion et dans ses propriété cocher orienté vers la trajectoire.

Un oiseau:

• Dessiner l’oiseau sans l’aile et en faire un symbole.
• Sur un autre calque dans la bibliothèque faire l’aile.
• Sur une duré pas trop long, au milieu de la timeline, placer une image clef aile vers le bas.
• faire une image clef aile vers le haut au début et à la fin(copier coller pour qu’elles soit identique)
• Faire glisser cette oiseau sur un nouveau calque dans la scène principale.
• Répéter les action de l’exercice précédant à savoir: Faire une ligne guide sur un autre calque…..

Une locomotive qui vibre:

• Créer un carré noir sur un calque dans le scénario.
• Le convertir en symbole.
• Créer un autre carré, le nommer locomotive et le convertir en symbole.
• Ouvrir ce symbole (locomotive) en double cliquant sur son image.
• Faire glisser le symbole carré noir sur la fenêtre locomotive pour compléter celle-ci, le modifier selon les besoins.
• Créer une image clef a (par exemple) une seconde sur toutes les lignes du scénario.(cliquer glisser puis F5)
• Créer une interpolation classique de toutes les lignes.
• Par ligne créer des images clefs au endroit désirés en déplaçant les rectangle noir de la locomotive.
• Créer un nouveau symbole (roue).
• Pour les rayon nous pouvons utiliser la fenêtre transformer une fois un rayon crée et son axe de pivot déplacé. Changer l’angle à 60° et dupliquer.
• Cliquer sur la première image de la roue qui tourne et créer une interpolation.
• Créer une image clef de fin.
• Le curseur sur l’image de fin cliquer, et faire un clique droit sur l’image dans la fenêtre,transformer,rotation antihoraire.
• Plus loin sur la ligne créer un autre image clef F6 cliquer dessus et clique droit sur l’image et recommencer.
• Ouvrir le symbole locomotive et y glisser autant de roue qui tourne que l’on désire.
• Sélectionner les roues, clique droit et repartir dans les calques pour que chaque roues soit dans un calque distinct.
• Revenir dans le scénario et placer comme précédemment la loco au début et à la fin.
• Sur la locomotive créer un calque, dessus faire une forme pleine au dessus de la loco et dans ses propriétés cocher masque.
• Sur le calque de la locomotive , propriété, cocher masqué.
• Pour la fumée, dans symbole ouvrir la locomotive et créer un nouveau calque.
• Dessiner la fumée et convertir en symbole.
• Symbole fumée dans la timeline placer une image clef au début, puis une différente à la fin et interpolation de forme.
• Pour plusieurs forme en même temps, cliquer sur l’image clef de début et modification, forme, ajouter un repère de forme.
• Placer le repère de forme sur le bord du premier objet et cliquer sur l’image de fin et placer le repère sur le bord du même nuage.

Pour ajouter un son (wav ou mp3)

• Importer le son.
• Créer un calque et une image clef au début.
• Dans propriétés dans son choisir son son.

Un lien très utile: cliquer ici

Pour arrêter l’animation (éviter la boucle):

• Dans la séquence au dessus, créer un calque (action) .
• Créer une image clef à la fin et dessus faire F9, ce qui donne accès a une fenêtre de script.
• Dans la fenêtre écrire : this.stop();

Ajouter des scripts (F9)

• Créer un calque « action » au dessus de la pille des calques.
• Y créer une image clef où on le désir et faire F9.
• Dans la fenêtre écrire: this.stop(); ceci arrêtera l’animation sur l’image clef (pas ce qui est en clip).

Pour arrêter le clip(ex: un papillon qui bat des ailes)

• Cliquer dans la fenêtre sur le papillon et dans ces propriétés le nommer « papillon_mc ».
• Dans la fenêtre action écrire: this.papillon_mc.stop();

Pour ajouter des boutons de contrôle

• Cliquer dans la fenêtre sur le bouton choisi (lecture) et le nommer dans ses propriétés « lecture_mc ».
• Sur le calque action, cliquer au début et F9.
• Dans la fenêtre action écrire:

this.lecture_mc.addEventListener('click', lecture.bind(this) );

function lecture(e) {

this.play();

}

Pour pause

• Cliquer dans la fenêtre sur le bouton pause et le nommer dans ses propriétés « pause_mc ».
• Sur le calque action, cliquer au début et F9.
  Dans la fenêtre action écrire:

 
this. pause_mc.addEventListener('click', pause.bind(this) );

function  pause(e) {

this.stop();

} 

Pour retour

• Idem que plus haut et écrire:

 
this. retour_mc.addEventListener('click', retour_debut.bind(this) );

function  retour_debut (e) {

this.gotoAndStop(0);

}  

Il faut faire attention au n° « 0 » de l’image ci-dessus, (si celui-ci était le n° 172) si l’on ajoute des images dans l’animation.

Il est plus prudent de créer un calque « label » et y placer les images clef, et dans leur propriétés les nommer début puis fin. Dans le script nous pouvons alors remplacer le n° par début et faire pareil pour fin.

Exporter:

• Créer un dossier d’exportation.
• Dans fichier, paramètre de publication, choisir son dossier d’exportation(nom de sortie).
• Dans avancés, décocher remplacer le fichier html.
• Cliquer sur OK.( Nous avons donc un dossier comprenant: suonds un fichier html et un fichier js).
• Soit intégrer un iframe en src= »loco.html » (ne pas oublier dans le sit de placer les deux autres fichier.
• Soit d’intégrer le html directement en temps que page du site.

Le site pour les codes: ici.

a h1:hover,
a img:hover {
transition-duration: 0.5s;
opacity: 0.7;
filter: alpha(opacity=70);
}

Flèche de menu tournant de 180° + Déroulement en 1 seconde:

.etiquette::after{
content: »⬇︎ »;
color: rgba(255, 255, 255, .5);
font-size: 1.5rem;
position:absolute;
display:block;
top:-2px;
left: 7rem ;
transition: all 1s;
}
#case-a-cocher:checked ~ .etiquette::after{
transform: rotate(-180deg);

}

.liste-menu{
max-height: 0;
overflow: hidden;
transition: all 1s;
}
#case-a-cocher:checked ~ .liste-menu{
max-height: 100vh;
overflow: hidden;
}

Un autre:

.etiquette2::after{
content: »⬇︎ »;
color: rgba(255, 255, 255, .5);
font-size: 1.5rem;
position:absolute;
display:block;
top:1rem;
left: 6rem ;
transition: all 1s;
}
#case-a-cocher2:checked ~ .etiquette2::after{
transform: rotate(-180deg);
}

.liste-menu2{
max-height:0;
overflow:hidden;
position: absolute;
z-index:100;
background-color: rgb(63, 63, 116,.95);
top: 100%;
right:0;
transition: all 1s;
}
#case-a-cocher2:checked ~ .liste-menu2{
max-height: 100vh;
overflow:hidden;
}

Pratique pour intégrer une image de fond par le css, cela évite de placer une id ou une class dans le html.

.navigation_principale a[href= »architecture.html »]{
background-image: url(../images/icone_architecture.png);

Ce n’est que le début, mais cela prend forme petit à petit.

Un peu plus tard……

Nous verrons cela plus en profondeur ultérieurement.

Ensuite, créer une première page html, minimum au départ, que nous enrichissons au fur et à mesure. Mais pour cela il faut tout d’abord préparer les photos (recadrage, résolution, retouches), ainsi que les dossiers et fichiers pour une bonne organisation. Nous avons également lié un fichier css que nous n’avons pas vraiment développé.

Voici donc à quoi ressemble notre première page:

<!doctype html>
<html lang= »fr »>

<head>
<meta charset= »utf-8″ />
<title>l’image et le web | galerie d’ architectures</title>
<meta name= »description » content= »Site d’entrainement à la préparation des images pour le web »/>
<link href= »css/style.css » rel= »stylesheet »/>
<!– exemple de style dans la page
<style>
h1{
color:red;
border-bottom: black dotter 4px;
}–>
</head>

<body>
<header>
<h1>L’image et le web</h1>
<h2>Site d’entrainement à la préparation des images pour le web</h2>
</header>

<nav>
<ul>
<li><a href= »architecture.html »>Architecture</a></li>
<li><a href= »portraits.html »>Portraits</a></li>
<li><a href= »pixelart.html »>Pixel Art</a></li>
<li><a href= »vecteurs.html »>Vecteurs</a></li>
<li><a href= »dessin.html »>Dessin</a></li>
<li><a href= »techniques.html »>Techeniques</a></li>
</ul>
</nav>

<main>
<h1>Architectures</h1>
<ul>
<li><a href= »images/arcitecture01.jpg »><img src= »images/arcitecture01_vignette.jpg » alt= »Architecture »/></a></li>
<li><a href= »images/architecture02.jpg »><img src= »images/architecture02_vignette.jpg » alt= »Architecture »/></a></li>
<li><a href= »images/fuste.jpg »><img src= »images/fuste_vignette.jpg » alt= »Fuste »/></a></li>
<li><a href= »images/mosque.jpg »><img src= »images/mosque_vignette.jpg »/></a></li>
</ul>
</main>

<footer>
<p>cos-rcf -2018-</p>
</footer>

</body>

</html>