PROJET 5A Cours 1

PROJET 5A Cours 1

Rappel Piskel

 

 

 

Créons notre animation

 

Je vous demande de bien vouloir reprendre le travail débuté en classe afin de ne pas abandonner ce projet.

 

CONSIGNES :

Vous devez réaliser une animation en pixel art sur le thème du temps, vous devez respecter les contraintes suivantes :

 

  1. cette animation doit tenir sur un écran de16pixels sur 16 pixels
  2. elle doit être symétrique selon un axe de symétrie vertical
  3. l’animation doit être fluide et réaliste

 

COMMENT SE CONNECTER ET UTILISER PISKEL

 

 l’adresse du site : https://www.piskelapp.com/

Vous pouvez aussi télécharger PISKEL sur votre ordinateur…

 

 

Coloriage

Sans dépasser s’il vous plait 😉

 

Maintenant que votre animation est terminée, il faut la recopier sur les feuilles d’écran… C’est une étape importante qui vous facilitera le travail de programmation par la suite.

Vous pouvez télécharger la feuille ci-dessous et pour ceux qui n’ont pas d’imprimante faire comme le modèle sur la photo ci-dessous…

FICHE A TELECHARGER

 

 

 

 

Pour rire un peu…

Ce n’est pas toujours facile de faire cours à la maison #Lechat #pirequ’unélève 😉

La suite bientôt… Posez vos question en commentaires ou sur le Tchat

Vous pouvez aussi m’envoyer vos fichiers piskel afin que je vois vos animations !

Notre Site niceart.fr

Notre Site niceart.fr

Dans ce cours je vous rappelle tous les éléments nécessaires pour pouvoir avancer dans la création de vos pages !

 

 

PREMIERE PARTIE : PREPAREZ VOS PHOTOS

 

Les photos seront importantes dans notre site, elles illustreront vos pages et seront un gage de qualité pour votre travail.

 

Cependant nous devons respecter certaines contraintes techniques lorsque nous faisons un site !

 

Nous devons faire attention... :

 

  • à la taille des photos (nombre de pixels en largeur et hauteur)

 

il faut que la taille de la photo soit adaptée à la résolution des écrans des ordinateurs et tablettes d'aujourd'hui. Il est inutile de mettre une photo de 4000 pixels sur 3000 pixels alors que la majorité des écrans ne dépassent pas les 2000 pixels de large

 

  • au poids des photos (nombre de kilo-octets ou mégaoctets) : c'est la place que prennent les photos sur notre site, plus le site est chargé moins il fonctionnera bien. Surtout, une image lourde mettra beaucoup de temps à parvenir sur l'ordinateur de notre visiteur, le temps de chargement de votre page sera trop long. Les sites dont le temps de chargement est trop long déplaisent aux moteurs de recherche (en particulier Google, ils n'hésitent pas à nous retirer de leurs répertoires)

 

POUR ALLER PLUS LOIN :

 

Quelle est la résolution de ton écran

Cet outil en ligne analyse votre écran et vous rappelle sa résolution, vous y verrez aussi le classement des différentes résolutions d’écran que l’on trouve de nos jours.

Testez la vitesse des sites web

Ce site permet de tester la rapidité d’affichage d’un site. Essayez plusieurs sites et comparez les scores par exemple avec le site google.fr

RECADRER UNE PHOTO

Sur PC windows

vous pouvez télécharger le logiciel libre de droit “Photofiltre” disponible ici –> http://photofiltre.free.fr/frames.htm

Puis voir la fiche guide téléchargeable ci-dessous

Sur MAC

Vous pouvez utiliser l’application “Aperçu” installée sur tous les ordinateurs Apple

Sur Tablettes et téléphones :

il existe de nombreuses applications permettant de modifier les tailles de photos, d’une manière générale dans App store ou Play store, faites une recherche “redimensionner image”

exemples : Photo & picture resizer, taille de l’image, Crop d’image… A vous de tester celle qui vous semble la plus pratique

 

PHOTOS Groupe M. Delbrayelle

Les Photos du groupe de M. Delbrayelle et M. Bescond sont là !

Comment redimensionner une image avec Photofiltre (même principe sur les autres logiciels ou applis)–>

Boucle et conditions

Boucle et conditions

CONSIGNES

Cours pour les 6èmes (premiers niveaux) et 5èmes (niveaux supérieurs)

 

Regardez le film avant de commencer la leçon !

 

Lire le cours avant de passer d’une étape à une autre.

 

Relever le défi !

Apprenons à coder proprement…

Entrainons nous sur Blockly

    Blockly est un site permettant de s’initier à la programmation. Nous allons l’utiliser pour cette leçon. Connecte toi sur Blockly -> BLOCKLY Clique sur LABYRINTHE

Partie 1 : des lignes de codes

  Pour faire l’exercice 1 et 2 il te suffit de placer les unes sous les autres les lignes de codes nécessaires… rien de compliqué. Passe à la partie 2 quand tu as fini.

Partie 2 : en boucle !

  Parfois il est nécessaire de répéter de nombreuses fois les mêmes instructions, cela devient vite fatigant et le programme devient trop long. Pour éviter cela nous allons utiliser “La boucle” Nous placerons au centre les instructions qui vont donc se répéter jusqu’à ce que la condition soit réalisé (ici le personnage arrive à la destination) Fais l’exercice 3, 4 et 5 et passe à la partie 3    

Partie 3 : Si…Alors, les conditions !

  Parfois nous souhaitons programmer des actions en fonction de certaines conditions… Ici, les lignes de codes qui seront placées au milieu s’exécuteront uniquement si la condition écrite au dessus est VRAI (dans cette exemple, si le personnage a un chemin possible à sa gauche) Fais les exercices 6 et 7 et passe à la partie 4

Partie 4 : Si….alors…. Sinon !

Dans les 2 derniers exercices, il faut faire preuve de beaucoup de reflexion et bien étudier le parcours des labyrinthe. Parfois, on désire qu’une série de lignes de codes soient exécutées si une condition est réalisée et qu’une autre série de lignes de code soient exécutées si cette condition n’est pas réalisée.