Archives pour la catégorie Archives

les anciens articles, à consulter sans modération

Du code oui, mais avec du style

Nous avons pu voir dans un précédent article comment construire une page web avec le langage HTML. Nous allons voir dans cet article comment lui donner du style avec un langage adapté, le CSS.

Le CSS (Cascading Style Sheets ou Feuille de style en cascade) permet de définir la présentation des document HTML et XML.

Avant d’aller plus loin, il est fortement conseillé d’avoir lu l‘article sur l’HTML.

Le style, la base…

Reprenons donc une structure basique de document HTML :

< !-- fichier index.html -->
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Ma page web</title>
        <link rel= « stylesheet » href= « ./css/style.css » >
    </head>
    <body>
        <h1>Mon premier site web!</h1>
    </body>
</html>
Base de notre page web
Base de notre page web

La ligne qui nous intéresse ici, est celle-ci :
<link rel= « stylesheet  » href=  » ./css/style.css  » >. Cette ligne de code, permet de dire au document HTML qu’un fichier CSS se trouve dans le répertoire css et son nom est style.css. C’est dans ce document que nous allons définir la présentation de notre document.

Admettons que nous voulions changer la couleur de fond de notre page web, pour la mettre en rouge. Le principe est le suivant : depuis la feuille de style, nous devons sélectionner l’élément HTML que nous voulons modifier, puis y définir des styles.

< !-- fichier css/style.css →
body {
   background : red ;
}

Sauvegardez le fichier, puis retourner sur votre navigateur et rafraichissez… Magie !

etape1

C’est finalement assez simple de définir une présentation pour un document :

  1. on définit quel élément nous voulons modifier
  2. entre accolades, on inscrit les différentes propriétés que l’on souhaite attribuer à l’élément.

Un autre exemple, avec notre balise de titre <h1>, nous allons changer la couleur du texte :

< !-- fichier css/style.css →
h1 {
   color: white ;
}

Sauvegardez le fichier, puis retournez sur votre navigateur et rafraichissez… Magie !

etape2

Le style, avec classe…

Il paraît évident que dans un même document HTML nous pouvons avoir plusieurs fois le même élément, par exemple dans un article, nous avons plusieurs balises <p> qui vont contenir tous les paragraphes. Alors comment faire pour en modifier qu’un seul ?

Reprenons notre document HTML :

< !-- fichier index.html -->
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Ma page web</title>
        <link rel="stylesheet" href="./css/style.css">
    </head>
    <body>
        <h1>Mon premier site web!</h1>
        <p>Mon premier paragraphe</p>
        <p>Mon deuxieme paragraphe</p>
    </body>
</html>

L’idée est de pouvoir modifier le style du second paragraphe, sans modifier le premier. Pour cela, nous utiliserons l’attribut class des éléments HTML, comme ceci :

< !-- fichier index.html -->
....
    <body>
        ....
        <p class="modifier">Mon deuxieme paragraphe</p>
    </body>
</html>
< !-- fichier css/style.css →
body {
    background : red ;
}
h1 {
    color: white ;
}
.modifier {
     background : black ;
     color : white ;
}

etape4

Nous avons donc rajouté une classe au paragraphe que nous voulions modifier. Si vous allez sur votre navigateur et que vous rafraîchissez vous pourrez voir les modifications.

Il existe énormément de sélecteurs en CSS. Pour en savoir plus, je vous conseille les sites suivants :

 

Vous pouvez faire des essais sur votre blog. En effet, avec le rôle Administrateur, dans Tableau de bord / Apparence, il existe une entrée « Modifier le CSS ». Vous pouvez ajouter le code nécessaire pour modifier l’apparence de votre blog, visualiser en aperçu ce que cela donnerait et enregistrer si cela vous convient. En cas d’erreur, il vous suffit d’effacer la ou les lignes correspondantes pour retrouver l’apparence d’origine.

Les blogs inscrits au concours

Les inscriptions au concours sont désormais closes pour cette année. Merci à tous ceux qui se sont inscrits.

Voici la liste et les liens vers les blogs ouverts, deux restent en attente de précisions et seront complétés au plus vite.

Une dizaine de thématiques se sont dégagées.

Arts et littérature
Lycée Alain Colas – Nevers P.E.G. ensemble arts appliquons http://blogue-ton-ecole.ac-dijon.fr/peg
École élémentaire RPI Saulon-la-Chapelle http://rpi-saulon-la-chapelle-barges-21.ec.ac-dijon.fr
Collège la Châtaigneraie – Autun 4eme Tremplin 2015-2016 http://blogue-ton-ecole.ac-dijon.fr/4eme-tremplin
Collège Jean Rostand Quétigny Les douze travaux des sixièmes http://blogue-ton-ecole.ac-dijon.fr/mythologie
Collège Jacques Prévert – Migennes Club Manga du collège Jacques Prévert Migennes http://blogue-ton-ecole.ac-dijon.fr/clubmangaprevertmigennes
Lycée Désiré Nisard Lisez ici, vous êtes ailleurs http://blogue-ton-ecole.ac-dijon.fr/litterature-et-societe-du-lycee-desire-nisard
Collège Jean-Philippe Rameau – Dijon Prix littéraire de Fontaine d’Ouche http://blogue-ton-ecole.ac-dijon.fr/prixlitteraireFDO
Lycée Prieur de la Côte d’Or Le Balzac Bazar http://blogue-ton-ecole.ac-dijon.fr/blogZac
LP Antoine Antoine – Chenôve Tournage au lycée Antoine http://blogue-ton-ecole.ac-dijon.fr/tournagelpantoine
Collège Jules Ferry – Beaune JEUX DE MOTS http://blogue-ton-ecole.ac-dijon.fr/jeux-de-mots
Collège Bois des Dames – Saint-Germain-du-Bois Le cercle des Webouquineurs http://blogue-ton-ecole.ac-dijon.fr/webouquineurs
Collège Champ Lumière – Selongey 1…2…3…lumière !! http://blogue-ton-ecole.ac-dijon.fr/theatrecollegeselongey
EREA-LEA Claude Brosse MANGA ZONE http://blogue-ton-ecole.ac-dijon.fr/mangazone
Lycée Camille du Gast – Chalon-sur-Saône Game of blog http://blogue-ton-ecole.ac-dijon.fr/camilledugastgameofblog
Lycée Emiland Gauthey – Chalon-sur-Saône Notre vision du futur http://blogue-ton-ecole.ac-dijon.fr/notre-vision-du-futur
Citoyenneté
Collège Le Mont Chatelet – Varzy En cinquième à Varzy contre le racisme http://blogue-ton-ecole.ac-dijon.fr/cinquieme-varzy-contre-racisme
Collège Jean Moulin – Montceau-les-Mines J. M. Blog http://blogue-ton-ecole.ac-dijon.fr/jean-moulin-montceau
Collège David Niepce L’Agora Citoyen du collège David Niepce http://blogue-ton-ecole.ac-dijon.fr/agora-niepce
Collège Victor Hugo – Lugny Ado Santé au College de Lugny http://blogue-ton-ecole.ac-dijon.fr/adosante
École élémentaire RPI Pontigny http://rpi-pontigny-venouse-rouvray-89.ec.ac-dijon.fr
Lycée Parc des Chaumes – Avallon ça ne chaumes pas http://blogue-ton-ecole.ac-dijon.fr/lyceedeschaumes
Lycée Prieur de la Côte d’Or Site Vinci Da Vinci Blog http://blogue-ton-ecole.ac-dijon.fr/davinciblog
Lycée E.J. Marey – Beaune Eco-Lycée Marey http://blogue-ton-ecole.ac-dijon.fr/eco-lycee-marey
Collège Condorcet – La Chapelle-de-Guinchay Blog du Collège Condorcet http://blogue-ton-ecole.ac-dijon.fr/collegeCondorcet
Collège Henri Wallon – Varennes-Vauzelles Tous frères ! http://blogue-ton-ecole.ac-dijon.fr/tousdesfreres
Lycée Jean-Marc Boivin – Chevigny-Saint-Sauveur « Pura Vida » http://blogue-ton-ecole.ac-dijon.fr/puravida
Lycée Abdel Kader, Beyrouth – MLF voixlaktée http://blogue-ton-ecole.ac-dijon.fr/LyceeLiban
Histoire patrimoine mémoire
École élémentaire de Sully http://rpi-sully-st-leger-71.ec.ac-dijon.fr/
Lycée La Prat’s – Cluny Matricule 35494: mémoires et responsabilité http://blogue-ton-ecole.ac-dijon.fr/matricule35494
Lycée international Charles de Gaulle – Dijon Mémoires croisées des héros   et des anonymes de la Première Guerre mondiale http://blogue-ton-ecole.ac-dijon.fr/memoire-europeenne-premiere-guerre-mondiale
Economie gestion
Lycée Professionnel Jean Rostand – Nevers Ensemble en Gestion Administration – promotion 2018 – Lycée Jean Rostand à Nevers http://blogue-ton-ecole.ac-dijon.fr/lprostand-ga-2018
Lycée Hilaire de Chardonnet – Chalon-sur-Saône PFEG au lycée Hilaire de Chardonnet Chalon sur Saone http://blogue-ton-ecole.ac-dijon.fr/hilairepfeg2016
Lycée Lamartine – Mâcon STMG Lamartine http://blogue-ton-ecole.ac-dijon.fr/lycee-lamartine-stmg
Lycée Le Castel – Dijon La filière STMG du lycée Le Castel à Dijon http://blogue-ton-ecole.ac-dijon.fr/stmg-lecastel
Métiers, découverte professionnelle
Collège Maurice Clavel – Avallon Les pérégrinations du P’tit Maurice http://blogue-ton-ecole.ac-dijon.fr/collegeclaveldp3
Collège Champollion – Dijon L’option DP3 au collège Champollion de Dijon http://blogue-ton-ecole.ac-dijon.fr/DP3-college-champollion-dijon
Collège Paul Barreau – Lormes L’édition Normale du collège Paul Barreau de Lormes http://blogue-ton-ecole.ac-dijon.fr/edition-normale
Sciences et techniques
Collège Félix Tisserand – Nuits-Saint-Georges SolarPak http://blogue-ton-ecole.ac-dijon.fr/solarpak
Collège La Croix des Sarrasins – Auxonne Des machines qui dessinent http://blogue-ton-ecole.ac-dijon.fr/des-machines-qui-dessinent
Collège Roland Dorgeles – Longvic TRANSPORT DU FUTUR http://blogue-ton-ecole.ac-dijon.fr/FuturMobil
Collège Paul Fort – Is-sur-Tille Une serre pour la SVT! http://blogue-ton-ecole.ac-dijon.fr/cpaulfort
Collège André Lallemand – Pouilly-en-Auxois AbonnEsciences http://blogue-ton-ecole.ac-dijon.fr/abonnesciences
Langues et cultures étrangères
Lycée Clos Maire – Beaune The Clos Time http://blogue-ton-ecole.ac-dijon.fr/clos-time
Collège Pierre et Jean Lerouge – Chablis Mais qui sont tous ces hispanophones? ¿Pero quiénes son todos estos hispanohablantes? http://blogue-ton-ecole.ac-dijon.fr/mais-qui-sont-tous-ces-hispanophones
Collège Les Chênes Rouges – Saint-Germain-du-Plain Red Oaks http://blogue-ton-ecole.ac-dijon.fr/red-oaks
Collège Louise Michel – Chagny Les voyages de Louise Michel http://blogue-ton-ecole.ac-dijon.fr/louise-michel-voyages
Voyages et sorties scolaires
Collège Robert Doisneau – Chalon-sur-Saône Very good trip in London – Les 3° du Collége Robert  Doisneau à la conquête de Londres http://blogue-ton-ecole.ac-dijon.fr/visite-londres-college-doisneau-chalon
Collège Miles de Noyers – Noyers Les nucériens font du ski http://blogue-ton-ecole.ac-dijon.fr/les-nuceriens-font-du-ski
Collège Roger Semet – Digoin Sur la route… http://blogue-ton-ecole.ac-dijon.fr/carnetdevoyage
Lycée Prieur de la Côte d’Or Euro’xonne http://blogue-ton-ecole.ac-dijon.fr/Euroxonne
Collège Emile Lepitre – Laignes Histoire, sciences et techniques en Toscane http://blogue-ton-ecole.ac-dijon.fr/toscane2016
Lycée français d’Alexandrie – MLF École primaire Lycée français d’Alexandrie http://blogue-ton-ecole.ac-dijon.fr/ecole-primaire-lfa
Lycée français de Murcie – MLF
Mon village/ma ville et le monde
Collège Prud’hon – Cluny Blogue du collège Prud’hon, Cluny http://blogue-ton-ecole.ac-dijon.fr/blogue-college-prudhon
Ecole élémentaire d’Etigny Mon village, ma géographie ! http://blogue-ton-ecole.ac-dijon.fr/mon-village-ma-geographie
Lycée Thomas Dumorey – Chalon-sur-Saône Vues de Chalon http://blogue-ton-ecole.ac-dijon.fr/vuesdechalon
Vie de l’école/ de l’établissement
Collège Henri Morat – Recey-sur-Ource La Grande Ource http://blogue-ton-ecole.ac-dijon.fr/lagrandeource
Collège Louis Pergaud – Couches Louis Pergaud Infos http://blogue-ton-ecole.ac-dijon.fr/louispergaud-infos
Ecole élémentaire Jean Jaurès – Dijon Blogs des écoles maternelle et élémentaire Jean Jaurès Dijon l’élémentaire : http://ele-dijon-jean-jaures-mixte2-21.ec.ac-dijon.fr/
la maternelle : http://mat-dijon-jean-jaures-n2-21.ec.ac-dijon.fr/
Collège Fontaine des Ducs – Châtillon-sur-Seine Blog du collège Fontaine http://blogue-ton-ecole.ac-dijon.fr/blogcollegefontaine
Collège Gâtinais en Bourgogne – Saint-Valérien à l’écoute de mon collège http://blogue-ton-ecole.ac-dijon.fr/lecoutedemoncollege
Lycée Technique et Professionnel Les Marcs d’Or Les Marcs d’Or en direct http://blogue-ton-ecole.ac-dijon.fr/LesMarcsdOrendirect
Collège Claude Guyot – Arnay-le-Duc Le blog du collège d’Arnay le Duc http://blogue-ton-ecole.ac-dijon.fr/arnay
Ecole élémentaire Pablo Neruda – Chalon-sur-Saône http://ele-chalon-pablo-neruda-71.ec.ac-dijon.fr/
Lycée français d’Alexandrie – MLF Réseau MLF – Egypte http://blogue-ton-ecole.ac-dijon.fr/mlfegypte

Merci à Léa Bigot et Nathalie Oï qui ont œuvré dans l’ombre, la première pour la signature des conventions et la seconde pour l’ouverture des blogs.

Balisons un peu…

Vous avez vu précédemment que derrière les pages se cachaient des codes. Aujourd’hui, nous allons voir ce qu’est le HTML5.

Qu’est-ce que HTML5 ?

HTML signifie : Hyper Text Markup Language.
HTML est un format de données conçu pour représenter des pages web.
Un document HTML est constitué de balises HTML.
Chaque balise HTML décrit différents contenus du document.

HTML5 est la dernière version majeure d’HTML.

Ma première page web

Pour votre première page web, vous avez besoin :

  • d’un éditeur de texte : notepad (windows), sublime text (linux), textEdit (mac os)…
  • d’un navigateur web : firefox, google chrome, safari, IE, Edge…

Etape 1 : ouvrez votre éditeur de texte

Etape 2 : écrivez du code HTML

Ecrivez ou copiez le code HTML ci-dessous dans votre éditeur de texte :

<!DOCTYPE html>
<html>
 <head>
  <title>Titre de la page web</title>
 </head>

<body>
 <h1>Titre</h1>
 <p>Mon premier paragraphe</p>
</body>
</html>

Etape 3 : sauvegardez votre page HTML

Sauvegardez votre fichier en le nommant index.html

Etape 4 : visualisez votre page HTML dans votre navigateur

Ouvrez votre fichier HTML sauvegardé dans votre navigateur

Pour cela, vous devez, à partir de votre explorateur, double-cliquer sur votre fichier index.html.

Celui-ci devrait s’ouvrir avec votre navigateur web par défaut.

Ce qui nous donne :

resultHTML01

Et voilà, vous avez effectué votre première page web !

Le contenu « visible » de votre page web se trouve entre les balises <body> et </body>.

Remarque : lorsque vous modifiez votre document HTML, pensez à « actualiser » la page sur votre navigateur afin de voir les changements apportés (depuis votre navigateur « appuyer » sur la touche « F5 » ou bien cliquer sur actualiser) .

Pour aller plus loin

Une balise se présente sous cette forme : <balise>

Il existe deux types de balise :

  • Les balises en paire : <balise></balise>
     <p>Mon premier paragraphe</p>

Les balises en paire sont toujours composées d’une balise ouvrante <balise> et d’une balise fermante </balise>. Et, entre les deux balises, il y a généralement du contenu textuel.

  • Les balises auto-fermantes : <balise />
     <br />

Quelques balises

  • <p></p> : paragraphe
 <p>Mon premier paragraphe</p>
 <p>Mon second paragraphe</p>

Ce qui nous donne :

paragraph
  • <b></b> :  gras
 <p>Mon <b>premier</b> paragraphe</p>
 <p>Mon <b>second</b> paragraphe</p>

Ce qui nous donne :

gras
  • <i></i> : italique
 <p>Mon <i>premier</i> paragraphe</p>
 <p>Mon <i>second</i> paragraphe</p>

Ce qui nous donne :

italic
  • <br /> : saut de ligne
 <p>Mon premier paragraphe</p>
 <br />
 <p>Mon second paragraphe</p>

Pour effectuer des sauts de ligne, vous êtes obligé d’utiliser la balise auto-fermante <br />, En effet, les sauts de ligne avec la touche « Entrée » dans votre éditeur ne sont pas interprétés par le navigateur.

Ce qui nous donne :

sautDeLigne
  • <hr /> : séparateur
 <p>Mon premier paragraphe</p>
 <hr />
 <p>Mon second paragraphe</p>

Ce qui nous donne :

separateur
  • <img /> : image
 <p>Ma premiere image <img src="smiley.png" /></p>

Ce qui nous donne :

image

Votre image doit se situer au même endroit que votre fichier HTML (index.html).

Dans notre exemple, nous avons, ce que l’on appelle un attribut. Il s’agit de l’attribut « src » qui a comme valeur le nom de notre image : « smiley.png ».

Il existe d’autres attributs pour la balise <img> : alt, width, height…

  • <a> : lien
<p>Mon premier <a href="http://www.google.fr">lien</a></p>

Ce qui nous donne :

mon premier lien

Dans notre exemple, nous avons un attribut « href » qui a comme valeur l’adresse d’une page web. Il est également possible de pointer sur une autre page « personnelle ».

<p>Mon premier <a href="mapage.html">Lien vers une autre page</a></p>
  • <ul>< li></li></ul> : puces
 <ul>
   <li>titre 1</li>
   <li>titre 2</li>
   <li>titre 3</li>
 </ul>

Ce qui nous donne :

puces
  • <table>< tr><td></td></tr></table> : tableau
 <table border="1">
 <tr>
  <td>Ligne 1 Colonne 1</td>
  <td>Ligne 1 Colonne 2</td>
 </tr>
 <tr>
  <td>Ligne 2 Colonne 1</td>
  <td>Ligne 2 Colonne 2</td>
 </tr>
 </table>

Ce qui nous donne :

tableau

Dans notre exemple, nous avons un attribut « border » qui nous permet d’afficher les bordures du tableau.

La balise <table> indique que l’on déclare un tableau. La balise <tr> correspond à une nouvelle ligne et la balise <td> correspond à une nouvelle colonne.

Il existe d’autres balises associées aux tableaux :

<th>, <caption>, <thead>, <tbody>, <tfoot>, …

Je vous invite à faire quelques recherches sur le web pour découvrir d’autres balises et d’autres attributs pour peaufiner la structure de vos pages.

Pour en savoir plus

w3schools (anglais)

html.net (français)

Je vous invite également à lire dans quelques jours l’article de Benjamin Gaudé sur le CSS3 qui vous permettra « d’habiller » et de mettre de la couleur dans vos pages.

Quelques propositions de thématiques

Les publications à visée artistique, culturelle, scientifique, pour mettre en place des échanges linguistiques, un partenariat avec un établissement à l’autre bout du monde, en lien avec une sortie ou un voyage scolaire sont toutes possibles dans le cadre du concours de blogs.

Cependant, on pourrait vouloir participer mais ne pas avoir d’idée de publication. C’est la raison pour laquelle des thématiques sont proposées, en s’adaptant à l’âge des publics.

  • Tout public – Mon identité sur internet.
  • École – Qui publie sur internet ?
  • Collège – Internet et liberté(s) dans le monde.
  • Lycées – La protection des données : un enjeu démocratique ?
  • Lycée professionnel – Le blog d’une entreprise fictive.

À vous de publier !

Le règlement du concours

Objectifs du concours

Le concours vise à développer les usages de la publication en ligne dans le cadre d’une pédagogie par projet. Il contribue donc à l’éducation aux médias et à l’information et à la validation des compétences du B2i. Il est organisé par l’académie de Dijon.

L’ensemble des informations concernant le concours est donné sur le site de la DANE, à l’adresse suivante : http://dane.ac-dijon.fr/spip.php?article448.

Les participants

Les élèves

Qui ?

Peuvent concourir les élèves de l’académie de Dijon, de l’école élémentaire au lycée. Ils sont accompagnés d’un ou plusieurs adultes (voir ci-dessous). Il s’agit d’une publication collective, aussi un élève ne peut-il pas participer seul.

Dans le cadre d’un partenariat avec des établissements ou écoles de l’académie, d’autres académies, ou à l’étranger, la participation d’élèves extérieurs à l’académie est possible.

Dans tous les cas, les publications sont majoritairement ou totalement le fait des élèves.

Il peut exister plusieurs projets pour une même école ou un même établissement.

Dans quel contexte ?

Les élèves participent au concours dans le cadre de leur classe, d’un dispositif, d’un club, d’un partenariat inter-niveau, inter-degré, inter-établissement, etc.

Le projet de publication peut être en lien avec une sortie ou un voyage scolaire, un projet culturel, scientifique, artistique, un sujet traité en classe, en enseignement d’exploration, en accompagnement personnalisé, en travaux personnels d’encadrement ou dans le cadre des futurs enseignements pratiques interdisciplinaires (EPI), toute thématique et discipline confondues, interdisciplinaire, etc.

Si l’absence de thématique freine le projet de publication, il est possible d’opter pour l’une des thématiques proposées par les organisateurs du concours lors du lancement. Il n’est nullement obligatoire de choisir l’une de ces thématiques.

Encadrement

Les adultes susceptibles d’encadrer la participation des élèves au concours sont :

  • des professeurs de l’établissement ou de l’école où se trouvent les élèves ; dans le cas d’un partenariat avec un autre établissement ou école, il y a des responsables dans chacun d’entre eux ;
  • des personnels intervenant auprès des élèves dans le cadre de clubs, qu’ils soient professeurs ou non. Les animateurs des activités périscolaires peuvent intervenir s’ils travaillent de concert avec un ou plusieurs des professeurs des écoles où ils interviennent.

Un adulte référent est indiqué au moment de l’inscription au concours. Il s’agit d’un personnel de l’Éducation nationale. Celui-ci reçoit l’adresse du blog, des identifiant et mot de passe pour se connecter en tant qu’administrateur. Il peut donc ensuite créer les comptes des élèves et autres adultes participant au concours.

Hébergement des blogs

L’hébergement des blogs est assuré par l’académie de Dijon (DSI du rectorat). L’ouverture d’un blog donne lieu à une convention.

Les écoles élémentaires peuvent concourir avec leur blog ou leur site d’école. Si celui-ci existe déjà, l’adulte référent en précisera l’adresse lors de l’inscription. Dans le cas contraire, il procédera à une demande d’assistance afin d’en solliciter la création.

Afin de distinguer les articles publiés par des adultes des articles rédigés par les élèves dans le cadre du concours, les participants choisiront entre le classement des articles dans une rubrique dédiée et l’utilisation du mot-clé « concours ».

En cas de volonté de dissocier nettement les deux entités (blog utilisé pour le concours et blog/site de l’école), une convention doit être complétée par le directeur ou la directrice de l’école et retournée au rectorat.

Enseignement secondaire : une plateforme spécifique est mise en place pour les blogs créés et participant au concours. Une convention est signée par le chef d’établissement qui agit avec l’accord du conseil d’administration.

Lorsqu’un blog spécifique au concours a été créé, sa durée d’existence et d’hébergement est fixée à un an, renouvelable si la participation au concours est prolongée les années suivantes ; la convention énonce les situations où un blog peut être fermé temporairement ou définitivement. Si plusieurs projets sont menés dans un même établissement, plusieurs blogs sont ouverts, aussi plusieurs conventions sont-elles signées.

Calendrier

Le concours s’organise en plusieurs phases :

  • septembre-octobre : les adultes référents inscrivent les élèves au concours en répondant à un formulaire ; le cas échéant, le blog est créé ; dès ce moment, les élèves peuvent commencer à écrire sur le blog ;
  • mars-avril : les adultes référents indiquent le ou les grands prix (voir ci-dessous) pour lesquels les élèves choisissent de candidater ;
  • mars-avril : les élèves qui souhaitent devenir membres d’un des jurys candidatent ;
  • mai-juin : les membres des différents jurys votent chacun pour les grands prix qui les concernent à partir de leur lecture des publications faites sur les différents blogs avant le 1ermai ;
  • fin juin- début juillet : trois équipes d’élèves sont retenues par grand prix et catégorie d’âge ; les décisions sont annoncées aux écoles et établissements dont des équipes ont participé ;
  • septembre, université numérique d’automne : des épreuves appelées défis départagent des représentants de chaque équipe.

Tout au long de l’année, un blog du concours est animé par des « experts » (professeurs volontaires, animateurs TICE, personnels de la DSI, de la DANE, de CANOPE, du CLEMI, etc.) qui donnent des conseils susceptibles d’engager la réflexion sur l’éducation aux médias et à l’information. Des activités seront également proposées. Elles sont toutes facultatives et peuvent être réalisées par des élèves participant au concours ou non.

Épreuves

Définition des Grands prix

Les élèves choisissent dans quelle(s) catégorie(s) ils concourent. Le choix est saisi par questionnaire par l’adulte référent (mars-avril) qui avait inscrit l’équipe au concours en septembre. Pour un même blog, il est possible de candidater pour une, deux ou les trois catégories.

Les trois grands prix sont :

  • Design Blog : il distingue le travail sur l’apparence du blog, de la bannière à la charte graphique. Seule la bannière et l’arrière-plan sont pris en compte pour l’enseignement élémentaire, la totalité des aspects peut être pris en compte pour les autres catégories d’âge ;
  • Free Blog : ce grand prix récompense la prise en compte des droits et libertés liés à une publication en ligne ;
  • Project Blog : ce grand prix valorise les contenus développés sur le blog.

Les catégories d’âge

Trois catégories d’âge sont définies :

  • École : pour les élèves de l’école élémentaire
  • Collège
  • Lycées (professionnel, général et technologique)

Jury

Pour chaque grand prix et chaque catégorie, des jurys d’élèves sont constitués sur la base du volontariat.

Les élèves qui peuvent être membres de jurys sont :

  • les élèves scolarisés dans une école ou un établissement peuvent être membres du jury d’un des grands prix à condition que leur école ou établissement ne concourent pas dans ce même grand prix
  • des élèves participant au concours pour un grand prix peuvent être membres des jurys des autres grands prix, de leur catégorie d’âge ou d’une autre plus jeune ;
  • les élèves peuvent se présenter individuellement ou collectivement (en classe par exemple).

Les élèves candidatent en rédigeant une lettre où ils font part de leur motivation (les modalités seront indiquées sur le blog du concours).

En fonction des possibilités techniques, des délibérations pourront être organisées par visioconférence ; le cas échéant, elles se dérouleront sur le temps scolaire et seront animées par un membre de la DANE (délégation académique au numérique éducatif). Les membres du jury se prononcent par un vote secret en classant les blogs préférés et en argumentant leur choix. Un nombre de points est attribué en fonction du classement effectué par chaque membre du jury ; le classement final est déterminé par la somme des points attribués.

Déroulement des défis

Le jour de l’université numérique d’automne, les équipes retenues pour chacun des grands prix et chaque catégorie d’âge s’affrontent en défis pour se départager. Ces défis sont différents pour chacun des grands prix. Ils sont limités dans le temps et comprennent des contraintes tenues secrètes et annoncées au fur et à mesure des épreuves (ce sont les « piments » des défis).

Dans le cas où les défis ne pourraient pas être organisés comme prévus le jour de l’Université numérique d’automne, par difficulté d’organisation par exemple, les défis n’auraient pas lieu et les grands prix seraient annoncés en utilisant le classement opérés par les jurys.

Prix – récompenses

Les élèves ayant participé aux blogs reçoivent une attestation-diplôme de leur participation. Il en est de même des élèves qui ont été membres d’un jury.

Les gagnants des grands prix et des défis reçoivent des lots en fonction des sponsors sollicités. Ces lots restent essentiellement à valeur symbolique.

Les gagnants deviennent des experts participant au blog du concours pour les années suivantes selon leur volonté.

 

En fonction du nombre d’équipes engagées dans le concours, des modifications sont susceptibles d’intervenir et seront signalées par une mise à jour de ce règlement, le fichier publié sur la page du site de la DANE consacré au concours (http://dane.ac-dijon.fr/spip.php?article448) et sur le blog du concours (http://blogue-ton-ecole.ac-dijon.fr) étant toujours considéré comme la dernière version.

Afficher le règlement en pdf