https://edutechwiki.unige.ch/fmediawiki/api.php?action=feedcontributions&user=Alfred+Bailly&feedformat=atomEduTech Wiki - Contributions [fr]2024-03-29T00:41:45ZContributionsMediaWiki 1.39.6https://edutechwiki.unige.ch/fmediawiki/index.php?title=Utilisateur:Alfred_Bailly&diff=33678Utilisateur:Alfred Bailly2014-01-15T07:55:44Z<p>Alfred Bailly : </p>
<hr />
<div>[[Fichier:Photo passeport Alfred Bailly IMAG0509.jpg|vignette]]<br />
<br />
== Présentation succincte ==<br />
Né en 1957 à Londres, j'ai passé ma vie en Suisse. Je suis marié, père de deux enfants et beau-père de trois.<br />
<br />
=== Expériences de vie ===<br />
Après différentes expériences en termes de métier : bureau, ouvrier agricole, chantier, usine durant une dizaine d'années, j'ai commencé dans le travail social que j'ai pratiqué durant 25 ans. Je suis, depuis 2010, responsable de formation à l'és-L, école supérieure en éducation sociale. J'ai obtenu au fil des ans, un diplôme d'éducateur, un certificat d'études avancées en handicap mental ainsi qu'en interventions systémiques puis une licence en sciences humaines et sociales, option sciences de l’éducation.<br />
<br />
=== Horizon ===<br />
Je ne suis plus actuellement étudiant à TECFA, alors que je m'étais inscrit au MALTT dans l'idée, déjà un peu appliquée en ce moment, d'accompagner les étudiants de l'és-L à distance lorsqu'ils sont sur leur lieu de pratique.<br />
<br />
Compte tenu que les étudiants que j'accompagne suivent leur formation en douze modules étalés en dix-huit sessions, ils sont, entre les cours, sur leur lieu de travail. Ils peuvent y rencontrer des difficultés sur lesquelles il serait certainement intéressant d'échanger. En effet, en tant que responsable de formation, je suis aussi concerné par la pratique de terrain et peux être une personne ressource pour les problématiques rencontrées :<br />
:<br />
*avec les bénéficiaires<br />
*avec un/des collègue/s<br />
*avec la direction de l'institution<br />
<br />
Ne suivant plus la formation MALTT, je vais continuer cet accompagnement de manière autodidacte et pragmatique selon mes ressources.<br />
<br />
=== Mes ressources ===<br />
Ma pratique professionnelle est liée à l'accompagnement:<br />
# de personnes en milieu psychiatrique, <br />
# milieu de la déficience intellectuelle, spécialement pour la question de l'[[Autodétermination]]<br />
# l'enfance<br />
<br />
== Ma philosophie de vie ==<br />
Aussi loin que je puisse remonter dans mon passé, dans mon temps perçu, je me suis posé des questions existentielles en lien avec ce qu'est une vie bonne, belle et juste; quelle est la cause de la vie, de la conscience ? Ce n'est donc pas un hasard que je me sois retrouvé éducateur même si, lorsque j'ai commencé ce métier, je n'avais pas conscience de ce qui animait ma motivation. Au fil des années, ma philosophie de vie et mon métier d'éducateur se sont intriqués l'une évoluant grâce à des lectures, à la théorie donc, et à l'expérience de l'autre de manière circulaire.<br />
<br />
Tant sur le plan privé que professionnel, j'ai agi, je me suis trompé, j'ai réagi, j'ai évolué pour arriver aujourd'hui et généralement à une certaine stabilité d'humeur, de réflexion et de capacité à l'action. J'ai fait un bout de chemin et sais qu'il me reste de la route. J'aime marcher et c'est donc un privilège et un plaisir de pouvoir continuer d'avancer. Je pense aussi que vivre, c'est apprendre et qu'apprendre permet de vivre avec plus de conscience voire en pleine conscience. Même si donc nous vivons dans un monde d'informations où certains modes de savoirs sont omniprésents : la presse, la télévision, la radio, etc, apprendre de façon consciente passe par l'étude proprement dite que cela soit en autodidacte qu'académiquement.</div>Alfred Baillyhttps://edutechwiki.unige.ch/fmediawiki/index.php?title=Cit%C3%A9job-n%C3%A9go&diff=30524Citéjob-négo2013-10-07T17:37:07Z<p>Alfred Bailly : </p>
<hr />
<div>{{eia q}}<br />
[[Catégorie:Jeux pédagogiques]]<br />
==Description==<br />
Le jeu est proposé par "Le portail des Cités des Métiers, Informations et outils pour l'évolution professionnelle, l'emploi et l'orientation, sur votre mobile".http://www.citejob.com/<br />
* Il s'agit ici de négocier le salaire pour une nouvelle place de travail. La prétendante ou le prétendant au poste tente de négocier le salaire à la hausse sans perdre de vue qu'il tient à obtenir le poste, ceci face à une recruteuse très habile et ferme dans la négociation.<br />
* Le candidat ou la candidate doit savoir argumenter et démontrer qu'il ou elle est un-e candidat-e sérieux-se pour le poste en montrant un positionnement ferme mais tout en restant souple et capable d'daptation. [[Fichier:CitéJob-Négo.jpg|vignette]]<br />
* Le jeu se joue sur une plateforme iPhone et Androïd et aucune version n'existe actuellement pour ordinateur. Adobe Air est requis pour pouvoir jouer.<br />
* Le jeu gratuit peut se télécharger sur : http://www.citejob.com/applications ou directement sur : https://play.google.com/store/apps/details?id=air.com.daesign.citejob.nego&hl=fr pour le système Androïd et enfin aussi sur : https://itunes.apple.com/fr/app/citejob-nego/id425157877?mt=8<br />
==Principes pédagogiques==<br />
L'entretien commence directement dans la phase de la négociation du salaire. Le-la candidat-e a le choix entre 3 réponses déterminantes pour la suite de l'entretien. Les bonnes réponses permettent d'aller à la conclusion d'un contrat d'embauche. La trame se déroule de manière classique dans les assessments où le-la postulant-e doit montrer à la fois sa détermination et sa souplesse, sa capacité à rebondir et trouver le ton juste. Il est certainement pédagogique pour toute personne voulant connaître les réponses attendues de la part d'un-e recruteur-euse.<br />
==Intégration du contenu enseigné dans le jeu==<br />
Le logiciel est simple en termes d'ergonomie et se joue sur l'écran tactile à l'aide de quelques gestes simples et commentés par des indications ainsi qu'un petit commentaire avant de prendre la décision finale. Il est toujours possible de recommencer le jeu quand les réponses n'ont pas été adéquates jusqu'à la réussite de l'entretien.<br />
==Points forts et point faibles==<br />
Pour quelqu'un en recherche d'emploi, le jeu offre différents scénarios permettant la compréhension des arcanes des techniques d'embauche.<br />
Le jeu se charge facilement à partir de Google play pour Androïd et Itunes pour iPhone. Il fonctionne avec Adobe Air. Une fois le jeu ouvert, le menu propose 5 options :<br />
* Choisir un thème<br />
* Les règles du jeu<br />
* Les gestes pour jouer<br />
* A propos<br />
* Donnez-nous votre avis<br />
En pesant sur Thème, un nouveau menu propose Joueur ou Joueuse, puis le jeu lui-même : Négociation de salaire à l'embauche. Une fois ce thème ouvert, une petite notice indique quoi faire puis plus rien sur un téléphone fonctionnant sous Androïd, mais sans problème pour un iPhone. Il est vrai que sur le site de CitéJob, la version pour Androïd est à venir alors qu'elle est déjà proposée sur le portail Google Play. <br />
Le métier choisi pour l'embauche est un métier commercial. Il serait probablement judicieux de proposer une palette plus large pour toutes sortes de métiers et pour toutes les catégories socio-professionnelles.<br />
==Logiciels similaires==<br />
[[Mon entretien d'embauche]]</div>Alfred Baillyhttps://edutechwiki.unige.ch/fmediawiki/index.php?title=Cit%C3%A9job-n%C3%A9go&diff=30447Citéjob-négo2013-10-06T21:04:23Z<p>Alfred Bailly : </p>
<hr />
<div>{{eia q}}<br />
[[Catégorie:Jeux pédagogiques]]<br />
==Description==<br />
Le jeu est proposé par "Le portail des Cités des Métiers, Informations et outils pour l'évolution professionnelle, l'emploi et l'orientation, sur votre mobile".http://www.citejob.com/<br />
* Il s'agit ici de négocier le salaire pour une nouvelle place de travail. La prétendante ou le prétendant au poste tente de négocier le salaire à la hausse sans prendre le risque que le poste lui échappe, ceci face à une recruteuse très habile dans la négociation.<br />
* Le candidat ou la candidate doit savoir argumenter et démontrer qu'il ou elle est un-e candidat-e sérieux-se pour le poste en montrant un position ferme mais néanmoins souple. [[Fichier:CitéJob-Négo.jpg|vignette]]<br />
* Le jeu se joue sur une plateforme iPhone et Androïd et aucune version n'existe actuellement pour ordinateur. Adobe Air est requis pour pouvoir jouer.<br />
* Le jeu gratuit peut se télécharger sur : http://www.citejob.com/applications ou directement sur : https://play.google.com/store/apps/details?id=air.com.daesign.citejob.nego&hl=fr pour le système Androïd et enfin aussi sur : https://itunes.apple.com/fr/app/citejob-nego/id425157877?mt=8<br />
==Principes pédagogiques==<br />
L'entretien commence directement dans la phase de la négociation du salaire. Le-la candidat-e a le choix entre 3 réponses déterminantes pour la suite de l'entretien. Les bonnes réponses permettent d'aller à la conclusion d'un contrat d'embauche. La trame se déroule de manière classique dans les assessments où le-la postulant-e doit montrer à la fois sa détermination et sa souplesse, sa capacité à rebondir et trouver le ton juste. Il est certainement pédagogique pour toute personne voulant connaître les réponses attendues de la part d'un-e recruteur-euse.<br />
==Intégration du contenu enseigné dans le jeu==<br />
Le logiciel est simple en termes d'ergonomie et se joue sur l'écran tactile à l'aide de quelques gestes simples et commentés par des indications ainsi qu'un petit commentaire avant de prendre la décision finale. Il est toujours possible de recommencer le jeu quand les réponses n'ont pas été adéquates jusqu'à la réussite de l'entretien.<br />
==Points forts et point faibles==<br />
Pour quelqu'un en recherche d'emploi, le jeu offre différents scénarios permettant la compréhension des arcanes des techniques d'embauche.<br />
Le jeu se charge facilement à partir de Google play pour Androïd et Itunes pour iPhone. Il fonctionne avec Adobe Air. Une fois le jeu ouvert, le menu propose 5 options :<br />
* Choisir un thème<br />
* Les règles du jeu<br />
* Les gestes pour jouer<br />
* A propos<br />
* Donnez-nous votre avis<br />
En pesant sur Thème, un nouveau menu propose Joueur ou Joueuse, puis le jeu lui-même : Négociation de salaire à l'embauche. Une fois ce thème ouvert, une petite notice indique quoi faire puis plus rien sur un téléphone fonctionnant sous Androïd, mais sans problème pour un iPhone. Il est vrai que sur le site de CitéJob, la version pour Androïd est à venir alors qu'elle est déjà proposée sur le portail Google Play.<br />
==Logiciels similaires==<br />
[[Mon entretien d'embauche]]</div>Alfred Baillyhttps://edutechwiki.unige.ch/fmediawiki/index.php?title=Cit%C3%A9job-n%C3%A9go&diff=30446Citéjob-négo2013-10-06T20:58:29Z<p>Alfred Bailly : </p>
<hr />
<div>{{eia q}}<br />
[[Catégorie:Jeux pédagogiques]]<br />
==Description==<br />
Le jeu est proposé par "Le portail des Cités des Métiers, Informations et outils pour l'évolution professionnelle, l'emploi et l'orientation, sur votre mobile".<br />
* Il s'agit ici de négocier le salaire pour une nouvelle place de travail. La prétendante ou le prétendant au poste tente de négocier le salaire à la hausse sans prendre le risque que le poste lui échappe, ceci face à une recruteuse très habile dans la négociation.<br />
* Le candidat ou la candidate doit savoir argumenter et démontrer qu'il ou elle est un-e candidat-e sérieux-se pour le poste en montrant un position ferme mais néanmoins souple. [[Fichier:CitéJob-Négo.jpg|vignette]]<br />
* Le jeu se joue sur une plateforme iPhone et Androïd et aucune version n'existe actuellement pour ordinateur. Adobe Air est requis pour pouvoir jouer.<br />
* Le jeu gratuit peut se télécharger sur : http://www.citejob.com/applications ou directement sur : https://play.google.com/store/search?q=Cit%C3%A9Job-N%C3%A9go&c=apps&hl=fr pour le système Androïd et enfin aussi sur : https://itunes.apple.com/fr/app/citejob-nego/id425157877?mt=8<br />
==Principes pédagogiques==<br />
L'entretien commence directement dans la phase de la négociation du salaire. Le-la candidat-e a le choix entre 3 réponses déterminantes pour la suite de l'entretien. Les bonnes réponses permettent d'aller à la conclusion d'un contrat d'embauche. La trame se déroule de manière classique dans les assessments où le-la postulant-e doit montrer à la fois sa détermination et sa souplesse, sa capacité à rebondir et trouver le ton juste. Il est certainement pédagogique pour toute personne voulant connaître les réponses attendues de la part d'un-e recruteur-euse.<br />
==Intégration du contenu enseigné dans le jeu==<br />
Le logiciel est simple en termes d'ergonomie et se joue sur l'écran tactile à l'aide de quelques gestes simples et commentés par des indications ainsi qu'un petit commentaire avant de prendre la décision finale. Il est toujours possible de recommencer le jeu quand les réponses n'ont pas été adéquates jusqu'à la réussite de l'entretien.<br />
==Points forts et point faibles==<br />
Pour quelqu'un en recherche d'emploi, le jeu offre différents scénarios permettant la compréhension des arcanes des techniques d'embauche.<br />
Le jeu se charge facilement à partir de Google play pour Androïd et Itunes pour iPhone. Il fonctionne avec Adobe Air. Une fois le jeu ouvert, le menu propose 5 options :<br />
* Choisir un thème<br />
* Les règles du jeu<br />
* Les gestes pour jouer<br />
* A propos<br />
* Donnez-nous votre avis<br />
En pesant sur Thème, un nouveau menu propose Joueur ou Joueuse, puis le jeu lui-même : Négociation de salaire à l'embauche. Une fois ce thème ouvert, une petite notice indique quoi faire puis plus rien sur un téléphone fonctionnant sous Androïd, mais sans problème pour un iPhone. Il est vrai que sur le site de CitéJob, la version pour Androïd est à venir alors qu'elle est déjà proposée sur le portail Google Play.<br />
==Logiciels similaires==<br />
[[Mon entretien d'embauche]]</div>Alfred Baillyhttps://edutechwiki.unige.ch/fmediawiki/index.php?title=Cit%C3%A9job-n%C3%A9go&diff=30445Citéjob-négo2013-10-06T20:50:28Z<p>Alfred Bailly : </p>
<hr />
<div>{{eia q}}<br />
[[Catégorie:Jeux pédagogiques]]<br />
==Description==<br />
Description rapide du logiciel:<br />
* Il s'agit ici de négocier le salaire pour une nouvelle place de travail. La prétendante ou le prétendant au poste tente de négocier le salaire à la hausse sans prendre le risque que le poste lui échappe, ceci face à une recruteuse très habile dans la négociation.<br />
* Le candidat ou la candidate doit savoir argumenter et démontrer qu'il ou elle est un-e candidat-e sérieux-se pour le poste en montrant un position ferme mais néanmoins souple. [[Fichier:CitéJob-Négo.jpg|vignette]]<br />
* Le jeu se joue sur une plateforme iPhone et Androïd et aucune version n'existe actuellement pour ordinateur. Adobe Air est requis pour pouvoir jouer.<br />
* Le jeu gratuit peut se télécharger sur : http://www.citejob.com/applications ou directement sur : https://play.google.com/store/search?q=Cit%C3%A9Job-N%C3%A9go&c=apps&hl=fr pour le système Androïd et enfin aussi sur : https://itunes.apple.com/fr/app/citejob-nego/id425157877?mt=8<br />
==Principes pédagogiques==<br />
L'entretien commence directement dans la phase de la négociation du salaire. Le-la candidat-e a le choix entre 3 réponses déterminantes pour la suite de l'entretien. Les bonnes réponses permettent d'aller à la conclusion d'un contrat d'embauche. La trame se déroule de manière classique dans les assessments où le-la postulant-e doit montrer à la fois sa détermination et sa souplesse, sa capacité à rebondir et trouver le ton juste. Il est certainement pédagogique pour toute personne voulant connaître les réponses attendues de la part d'un-e recruteur-euse.<br />
==Intégration du contenu enseigné dans le jeu==<br />
Le logiciel est simple en termes d'ergonomie et se joue sur l'écran tactile à l'aide de quelques gestes simples et commentés par des indications ainsi qu'un petit commentaire avant de prendre la décision finale. Il est toujours possible de recommencer le jeu quand les réponses n'ont pas été adéquates jusqu'à la réussite de l'entretien.<br />
==Points forts et point faibles==<br />
Pour quelqu'un en recherche d'emploi, le jeu offre différents scénarios permettant la compréhension des arcanes des techniques d'embauche.<br />
Le jeu se charge facilement à partir de Google play pour Androïd et Itunes pour iPhone. Il fonctionne avec Adobe Air. Une fois le jeu ouvert, le menu propose 5 options :<br />
* Choisir un thème<br />
* Les règles du jeu<br />
* Les gestes pour jouer<br />
* A propos<br />
* Donnez-nous votre avis<br />
En pesant sur Thème, un nouveau menu propose Joueur ou Joueuse, puis le jeu lui-même : Négociation de salaire à l'embauche. Une fois ce thème ouvert, une petite notice indique quoi faire puis plus rien sur un téléphone fonctionnant sous Androïd, mais sans problème pour un iPhone.<br />
==Logiciels similaires==<br />
[[Mon entretien d'embauche]]</div>Alfred Baillyhttps://edutechwiki.unige.ch/fmediawiki/index.php?title=Cit%C3%A9job-n%C3%A9go&diff=30442Citéjob-négo2013-10-06T20:05:20Z<p>Alfred Bailly : </p>
<hr />
<div>{{eia q}}<br />
[[Catégorie:Jeux pédagogiques]]<br />
==Description==<br />
Description rapide du logiciel:<br />
* Il s'agit ici de négocier le salaire pour une nouvelle place de travail. La prétendante ou le prétendant au poste tente de négocier le salaire à la hausse sans prendre le risque que le poste lui échappe, ceci face à une recruteuse très habile dans la négociation.<br />
* Le candidat ou la candidate doit savoir argumenter et démontrer qu'il ou elle est un-e candidat-e sérieux-se pour le poste en montrant un position ferme mais néanmoins souple. <br />
* [[Fichier:CitéJob-Négo.jpg|vignette]]<br />
* Le jeu se joue sur une plateforme iPhone et Androïd et aucune version n'existe actuellement pour ordinateur. Adobe Air est requis pour pouvoir jouer.<br />
* Le jeu gratuit peut se télécharger sur : http://www.citejob.com/applicationsAccès (lien, éditeur, prix)<br />
<br />
==Principes pédagogiques==<br />
<br />
Analyse de l'approche pédagogique du jeu. Se référer à certains principes et théories connus.<br />
<br />
==Intégration du contenu enseigné dans le jeu==<br />
<br />
Analyse du logiciel dans sa capacité à intégrer le contenu dans la mécanique de jeu.<br />
<br />
==Points forts et point faibles==<br />
<br />
Développer ici une point de vue critique global sur le logiciel.<br />
<br />
Le jeu se charge facilement à partir de Google play, version iPhone ou Androïd. Il fonctionne avec Adobe Air. Cependant, une fois le jeu ouvert, le menu propose 5 options :<br />
<br />
* Choisir un thème<br />
* Les règles du jeu<br />
* Les gestes pour jouer<br />
* A propos<br />
* Donnez-nous votre avis<br />
<br />
En pesant sur Thème, un nouveau menu propose Joueur ou Joueuse, puis le jeu lui-même : Négociation de salaire à l'embauche. Une fois ce thème ouvert, une petite notice indique quoi faire puis plus rien. Le jeu se jouant sur le téléphone, aucune commande ne vient aider le joueur lambda qui se trouve ensuite démuni et doit chercher une solution, laquelle peut être de lire le jeu sur un iPhone.<br />
<br />
<br />
==Logiciels similaires==<br />
Indiquer des exemples de logiciels qui ressemblent au logiciel étudié, de préférence des logiciels déjà décrits dans l'Edutech wiki (avec un lien vers la fiche).<br />
Alfred Bailly</div>Alfred Baillyhttps://edutechwiki.unige.ch/fmediawiki/index.php?title=Fichier:Cit%C3%A9Job-N%C3%A9go.jpg&diff=30441Fichier:CitéJob-Négo.jpg2013-10-06T19:53:11Z<p>Alfred Bailly : Photo de la recruteuse chez CitéJob-Négo</p>
<hr />
<div>Photo de la recruteuse chez CitéJob-Négo</div>Alfred Baillyhttps://edutechwiki.unige.ch/fmediawiki/index.php?title=Utilisateur:Alfred_Bailly&diff=30424Utilisateur:Alfred Bailly2013-10-06T17:32:01Z<p>Alfred Bailly : </p>
<hr />
<div>[[Fichier:Photo passeport Alfred Bailly IMAG0509.jpg|vignette]]<br />
<br />
== Présentation succincte ==<br />
Né en 1957 à Londres, j'ai passé ma vie en Suisse. Je suis marié, père de deux enfants et beau-père de trois.<br />
<br />
=== Expériences de vie ===<br />
Après différentes expériences en termes de métier : bureau, ouvrier agricole, chantier, usine durant une dizaine d'années, j'ai commencé dans le travail social que j'ai pratiqué durant 25 ans. Je suis, depuis 2010, responsable de formation à l'és-L, école supérieure en éducation sociale. J'ai obtenu au fil des ans, un diplôme d'éducateur, un certificat d'études avancées en handicap mental ainsi qu'en interventions systémiques puis une licence en sciences humaines et sociales, option sciences de l’éducation.<br />
<br />
=== Horizon ===<br />
Je suis actuellement étudiant à TECFA, inscrit au MALTT dans l'idée, déjà un peu appliquée en ce moment, d'accompagner les étudiants de l'és-L à distance lorsqu'ils sont sur leur lieu de pratique.<br />
<br />
Compte tenu que les étudiants que j'accompagne suivent leur formation en douze modules étalés en dix-huit sessions, ils sont, entre les cours, sur leur lieu de travail. Ils peuvent y rencontrer des difficultés sur lesquelles il serait certainement intéressant d'échanger. En effet, en tant que responsable de formation, je suis aussi concerné par la pratique de terrain et peux être une personne ressource pour les problématiques rencontrées :<br />
:<br />
*avec les bénéficiaires<br />
*avec un/des collègue/s<br />
*avec la direction de l'institution<br />
<br />
=== Mes ressources ===<br />
Ma pratique professionnelle est liée à l'accompagnement:<br />
# de personnes en milieu psychiatrique, <br />
# milieu de la déficience intellectuelle, spécialement pour la question de l'[[Autodétermination]]<br />
# l'enfance<br />
<br />
== Ma philosophie de vie ==<br />
Aussi loin que je puisse remonter dans mon passé, dans mon temps perçu, je me suis posé des questions existentielles en lien avec ce qu'est une vie bonne, belle et juste; quelle est la cause de la vie, de la conscience ? Ce n'est donc pas un hasard que je me sois retrouvé éducateur même si, lorsque j'ai commencé ce métier, je n'avais pas conscience de ce qui animait ma motivation. Au fil des années, ma philosophie de vie et mon métier d'éducateur se sont intriqués l'une évoluant grâce à des lectures, à la théorie donc, et à l'expérience de l'autre de manière circulaire.<br />
<br />
Tant sur le plan privé que professionnel, j'ai agi, je me suis trompé, j'ai réagi, j'ai évolué pour arriver aujourd'hui et généralement à une certaine stabilité d'humeur, de réflexion et de capacité à l'action. J'ai fait un bout de chemin et sais qu'il me reste de la route. J'aime marcher et c'est donc un privilège et un plaisir de pouvoir continuer d'avancer. Je pense aussi que vivre, c'est apprendre et qu'apprendre permet de vivre avec plus de conscience voire en pleine conscience. Même si donc nous vivons dans un monde d'informations où certains modes de savoirs sont omniprésents : la presse, la télévision, la radio, etc, apprendre de façon consciente passe par l'étude proprement dite que cela soit en autodidacte qu'académiquement.</div>Alfred Baillyhttps://edutechwiki.unige.ch/fmediawiki/index.php?title=Fichier:Photo_passeport_Alfred_Bailly_IMAG0509.jpg&diff=30423Fichier:Photo passeport Alfred Bailly IMAG0509.jpg2013-10-06T17:27:49Z<p>Alfred Bailly : Photo pour homepage Edu Tech Wiki</p>
<hr />
<div>Photo pour homepage Edu Tech Wiki</div>Alfred Baillyhttps://edutechwiki.unige.ch/fmediawiki/index.php?title=Utilisateur:Alfred_Bailly&diff=30422Utilisateur:Alfred Bailly2013-10-06T17:24:43Z<p>Alfred Bailly : </p>
<hr />
<div>== Présentation succincte ==<br />
Né en 1957 à Londres, j'ai passé ma vie en Suisse. Je suis marié, père de deux enfants et beau-père de trois.<br />
<br />
=== Expériences de vie ===<br />
Après différentes expériences en termes de métier : bureau, ouvrier agricole, chantier, usine durant une dizaine d'années, j'ai commencé dans le travail social que j'ai pratiqué durant 25 ans. Je suis, depuis 2010, responsable de formation à l'és-L, école supérieure en éducation sociale. J'ai obtenu au fil des ans, un diplôme d'éducateur, un certificat d'études avancées en handicap mental ainsi qu'en interventions systémiques puis une licence en sciences humaines et sociales, option sciences de l’éducation.<br />
<br />
=== Horizon ===<br />
Je suis actuellement étudiant à TECFA, inscrit au MALTT dans l'idée, déjà un peu appliquée en ce moment, d'accompagner les étudiants de l'és-L à distance lorsqu'ils sont sur leur lieu de pratique.<br />
<br />
Compte tenu que les étudiants que j'accompagne suivent leur formation en douze modules étalés en dix-huit sessions, ils sont, entre les cours, sur leur lieu de travail. Ils peuvent y rencontrer des difficultés sur lesquelles il serait certainement intéressant d'échanger. En effet, en tant que responsable de formation, je suis aussi concerné par la pratique de terrain et peux être une personne ressource pour les problématiques rencontrées :<br />
:<br />
*avec les bénéficiaires<br />
*avec un/des collègue/s<br />
*avec la direction de l'institution<br />
<br />
=== Mes ressources ===<br />
Ma pratique professionnelle est liée à l'accompagnement:<br />
# de personnes en milieu psychiatrique, <br />
# milieu de la déficience intellectuelle, spécialement pour la question de l'[[Autodétermination]]<br />
# l'enfance<br />
<br />
== Ma philosophie de vie ==<br />
Aussi loin que je puisse remonter dans mon passé, dans mon temps perçu, je me suis posé des questions existentielles en lien avec ce qu'est une vie bonne, belle et juste; quelle est la cause de la vie, de la conscience ? Ce n'est donc pas un hasard que je me sois retrouvé éducateur même si, lorsque j'ai commencé ce métier, je n'avais pas conscience de ce qui animait ma motivation. Au fil des années, ma philosophie de vie et mon métier d'éducateur se sont intriqués l'une évoluant grâce à des lectures, à la théorie donc, et à l'expérience de l'autre de manière circulaire.<br />
<br />
Tant sur le plan privé que professionnel, j'ai agi, je me suis trompé, j'ai réagi, j'ai évolué pour arriver aujourd'hui et généralement à une certaine stabilité d'humeur, de réflexion et de capacité à l'action. J'ai fait un bout de chemin et sais qu'il me reste de la route. J'aime marcher et c'est donc un privilège et un plaisir de pouvoir continuer d'avancer. Je pense aussi que vivre, c'est apprendre et qu'apprendre permet de vivre avec plus de conscience voire en pleine conscience. Même si donc nous vivons dans un monde d'informations où certains modes de savoirs sont omniprésents : la presse, la télévision, la radio, etc, apprendre de façon consciente passe par l'étude proprement dite que cela soit en autodidacte qu'académiquement.</div>Alfred Baillyhttps://edutechwiki.unige.ch/fmediawiki/index.php?title=Cit%C3%A9job-n%C3%A9go&diff=30415Citéjob-négo2013-10-06T14:03:01Z<p>Alfred Bailly : </p>
<hr />
<div>{{eia q}}<br />
[[Catégorie:Jeux pédagogiques]]<br />
==Description==<br />
Description rapide du logiciel:<br />
* Contenu enseigné<br />
* Fonctionnement général, mécanique de jeu<br />
* Copies d'écran éventuelles<br />
* Environnement informatique (exécutable / web, Système d'exploitation, éventuellement langage de développement)<br />
* Accès (lien, éditeur, prix)<br />
<br />
==Principes pédagogiques==<br />
<br />
Analyse de l'approche pédagogique du jeu. Se référer à certains principes et théories connus.<br />
<br />
==Intégration du contenu enseigné dans le jeu==<br />
<br />
Analyse du logiciel dans sa capacité à intégrer le contenu dans la mécanique de jeu.<br />
<br />
==Points forts et point faibles==<br />
<br />
Développer ici une point de vue critique global sur le logiciel.<br />
<br />
Le jeu se charge facilement à partir de Google play, version iPhone ou Androïd. Il fonctionne avec Adobe Air. Cependant, une fois le jeu ouvert, le menu propose 5 options :<br />
<br />
* Choisir un thème<br />
* Les règles du jeu<br />
* Les gestes pour jouer<br />
* A propos<br />
* Donnez-nous votre avis<br />
<br />
En pesant sur Thème, un nouveau menu propose Joueur ou Joueuse, puis le jeu lui-même : Négociation de salaire à l'embauche. Une fois ce thème ouvert, une petite notice indique quoi faire puis plus rien. Le jeu se jouant sur le téléphone, aucune commande ne vient aider le joueur lambda qui se trouve ensuite démuni et doit chercher une solution.<br />
<br />
<br />
==Logiciels similaires==<br />
Indiquer des exemples de logiciels qui ressemblent au logiciel étudié, de préférence des logiciels déjà décrits dans l'Edutech wiki (avec un lien vers la fiche).<br />
AlfredBailly</div>Alfred Baillyhttps://edutechwiki.unige.ch/fmediawiki/index.php?title=Cit%C3%A9job-n%C3%A9go&diff=29859Citéjob-négo2013-09-29T20:32:04Z<p>Alfred Bailly : Page créée avec « {{eia q}} Catégorie:Jeux pédagogiques ==Description== Description rapide du logiciel: * Contenu enseigné * Fonctionnement général, mécanique de jeu * Copies d'é... »</p>
<hr />
<div>{{eia q}}<br />
[[Catégorie:Jeux pédagogiques]]<br />
==Description==<br />
Description rapide du logiciel:<br />
* Contenu enseigné<br />
* Fonctionnement général, mécanique de jeu<br />
* Copies d'écran éventuelles<br />
* Environnement informatique (exécutable / web, Système d'exploitation, éventuellement langage de développement)<br />
* Accès (lien, éditeur, prix)<br />
<br />
==Principes pédagogiques==<br />
<br />
Analyse de l'approche pédagogique du jeu. Se référer à certains principes et théories connus.<br />
<br />
==Intégration du contenu enseigné dans le jeu==<br />
<br />
Analyse du logiciel dans sa capacité à intégrer le contenu dans la mécanique de jeu.<br />
<br />
==Points forts et point faibles==<br />
<br />
Développer ici une point de vue critique global sur le logiciel.<br />
Faire figurer ici les critiques ergonomiques éventuelles.<br />
<br />
==Logiciels similaires==<br />
Indiquer des exemples de logiciels qui ressemblent au logiciel étudié, de préférence des logiciels déjà décrits dans l'Edutech wiki (avec un lien vers la fiche).<br />
AlfredBailly</div>Alfred Baillyhttps://edutechwiki.unige.ch/fmediawiki/index.php?title=Tutoriel_CSS&diff=29848Tutoriel CSS2013-09-29T07:02:53Z<p>Alfred Bailly : importatation : changé en importation</p>
<hr />
<div>{{Incomplet}}<br />
<pageby nominor="false" comments="false"/><br />
<br />
== Introduction ==<br />
<br />
Petite introduction à CSS. Il s'agit d'une importation de transparents - à compléter (!) / [[Utilisateur:Daniel K. Schneider|Daniel K. Schneider]] 26 août 2008 à 14:21 (CEST)<br />
<br />
Voir aussi: [[Liens CSS]] (page avec des ressources)<br />
<br />
Objectifs:<br />
<br />
* Savoir faire de simples style sheets HTML avec CSS<br />
* Faire des pages emboîtées sans tables<br />
* XML avec CSS<br />
* (Pas de DHTML pour le moment, ce se fera dans un autre module je pense)<br />
<br />
== Introduction aux "Cascading Style Sheets" ==<br />
<br />
=== Motivation ===<br />
<br />
'''Avantages''':<br />
<br />
* Mises en page HTML et XML sophistiquées<br />
* DHTML (changement de positionnement d'éléments sur x,y et z par exemple)<br />
* Séparation de contenu et de style:<br />
** permet de servir une page à plusieurs "sauces" (HTML riche, HTML pauvre mais efficace, HTML vocal, ....), donc variantes pour imprimer, le PDA, etc.<br />
** permet de gérér centralement le "look" de pleines de pages, donc diminue le coût de maintenance<br />
** rend une page plus "lisible" et plus rapide à télécharger<br />
<br />
'''Désavantages'''<br />
<br />
* Implémentations CSS1: bonnes dans Mozilla/Firefox 2+ et potables dans IE 6+<br />
* Implémentations CSS2: toujours lacunaires.<br />
* Il existe des tables de compatibilités, voir [[:en:CSS|CSS]] (en Anglais)<br />
<br />
'''Ce qui manque'''<br />
<br />
* Dans CSS1 / CSS2 il existe peu de capacités pour transformer un texte (voir [[XSLT]])<br />
<br />
=== Principe de base ===<br />
<br />
* Feuille de style = jeux de règles qui précise l'affichage d'un élément HTML ou XML<br />
* Chaque règle est composée:<br />
** d'un '' sélecteur'' (qui indique à quel type d'élément la règle s'applique)<br />
** une '' déclaration'' (qui comprend une ou plusieurs instructions de mise en page<br />
<br />
'''Exemple (de sensibilisation)'''<br />
<br />
<source lang="CSS"><br />
H1 { color: red }<br />
P { font-face: Verdana, sans-serif ; font-size: 12pt}<br />
H1, H2, H3 { color : blue }<br />
H1.ChapterTOC, H2.PeriodeTOC, H2.ExerciceTOC, H2.SectionTOC {<br />
display: block;text-indent: 30pt;<br />
text-align: left; font-size: 14.000000pt;<br />
font-weight: Bold; font-family: "Times";<br />
}<br />
</source><br />
<br />
[[Image:css-intro-1.png]]<br />
<br />
=== Conseils HTML ===<br />
<br />
* Mettez des balises fermantes (&lt;p&gt; .....&lt;/p&gt;, &lt;li&gt; .... &lt;/li&gt;, etc)<br />
* Testez avec Mozilla/Firefox, ajustez ensuite pour IE Explorer (et autres navigateurs déficients).<br />
<br />
'''Pour être compatible:'''<br />
<br />
* Pour gérer les anciens browsers (NS 4 et IE 5) comprénant mal CSS il faut écrire des scripts de filtrage (disponibles sur le "web master's sites").<br />
* Pour gérer les Netscape 3 etc. pas de problème, ils ignorent les CSS<br />
<br />
== Association d'une feuille de style à une page HTML ==<br />
<br />
Il existe plusieurs méthodes<br />
<br />
=== Styles "inline" ===<br />
<br />
Il est possible de définir des règles d'affichage pour des éléments HTML grâce à l'attribut "'''style'''".<br />
<br />
Exemple de code:<br />
<source lang="CSS"><br />
<p style="color: red; font: 12pt times; margin-left: 2em"><br />
On peut définir un style pour chaque balise. <br />
Ce paragraphe contient son propre style, mais ce n'est pas très efficace ...<br />
</p><br />
</source><br />
<br />
Dans cet exemple, on ajoute plusieurs propriétés CSS à l'élément "p" (un paragraphe):<br />
<br />
* color: red = on défini la couleur du texte.<br />
* font: 12pt times = on défini la police du paragraphe.<br />
* margin-left = on défini les marges gauches.<br />
<br />
Ce principe de "style inline" s'applique tous les éléments HTML (span, div, li, etc.). Exemple avec la balise "span":<br />
<source lang="CSS"><br />
<p><br />
On peut définir <span style="color: red;"> une phrase toute<br />
rouge </span>. Et revenir à la normale plus tard ...<br />
</p><br />
</source><br />
<br />
Résultat:<br />
On peut définir <span style="color: red;"> une phrase toute rouge </span>. Et revenir à la normale plus tard ...<br />
<br />
Le désavantage de cette méthode est que le code CSS est intégré aux pages HTML. Il n'y a donc pas de séparation entre le contenu et la présentation.<br />
<br />
Lorsque vous voulez modifier le style d'un élément, il est nécessaire d'ouvrir et de modifier chaque document HTML, puis de trouver l'élément en question dans le code. Selon le nombre de pages HTML et le nombre de lignes de code, cela peut être très fastidieux.<br />
<br />
Exemple live: http://tecfa.unige.ch/guides/css/ex/simple-css2.html<br />
<br />
=== Feuille de style imbriquée dans une page ===<br />
<br />
* Déclaration d'une feuille de style avec la balise &lt;style&gt;<br />
<br />
'''Exemple 3-1: Simples feuilles CSS imbriquées'''<br />
<br />
* [http://tecfa.unige.ch/guides/css/ex/simple-css.html simple-css.html]<br />
* [http://tecfa.unige.ch/guides/css/ex/simple-css2.html simple-css2.html] (exemple plus compliqué)<br />
<br />
'''Utilisation:'''<br />
<br />
* La déclaration doit se faire dans le &lt;head&gt; (sinon il peut y avoir des problèmes, par ex. la couleur background du body qui ne s'affiche pas)<br />
* Pour rester compatible avec les '''très''' '''très''' anciens navigateurs, il faudrait commenter les règles CSS comme dans l'exemple ci-dessous !<br />
<br />
<source lang="CSS"><br />
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2//EN"><br />
<html> <head><br />
<title>Simple CSS démo</title><br />
<style type="text/css"><br />
<!--<br />
body {background: white; font-family: Helvetica, Arial, sans-serif;}<br />
H2, H3 {font-family: Helvetica, Arial, sans-serif;}<br />
P.intro {color: blue; margin-left: 4em; margin-right: 2em;}<br />
.default {margin-left: 2em;}<br />
--><br />
</style><br />
</head><br />
</source><br />
<br />
=== Feuille de style externe associé à des pages HTML ===<br />
<br />
* Solution efficace pour gérér le look de plusieurs (ou pleins!) de pages<br />
* La balise &lt;link&gt; doit se trouver dans le &lt;head&gt;<br />
* Si vous utilisez des caractères non standards dans le texte ("é","ö", etc.) il faudrait déclarer l'attribut CHARSET dans le HTML (à vérifier)<br />
* Pensez à créer un répertoire central pour vos styles ! (A tecfa: /web/styles)<br />
* Vous pouvez regarder le source d'une page HTML et ensuite manuellement entrer l'URL pour le CSS et le regarder (s'il en existe un)<br />
<br />
Exemple: Simple feuille CSS externe<br />
* Source: [http://tecfa.unige.ch/guides/css/ex/simple-css3.html simple-css3.html]<br />
<br />
<source lang="CSS"><br />
<html><br />
<head><br />
<link rel="stylesheet" href="simple-css3.css" charset="UTF-8" type="text/css"/><br />
<title>Simple CSS démo III</title><br />
</head><br />
<body><br />
</source><br />
<br />
'' ATTENTION'' : Dans le fichier - feuille de style vous mettez '' juste '' les déclarations CSS, rien d'autre: pas d'entêtes, rien d'autre !!<br />
<br />
=== Multiples feuilles de style ===<br />
<br />
Les multiples feuilles de style ont plusieurs usages:<br />
<br />
(1) On peut laisser l'utilisateur choisir !<br />
* Dans Mozilla/Firefox en tout cas (Menu View-&gt;Use Style)<br />
* On peut aussi écrire un programme JavaScript qui le fait<br />
** '' http://www.alistapart.com/stories/alternate/test.html''<br />
<br />
(2) Pensez à faire une version spéciale pour l'impression<br />
<br />
Exemple de la home page de DKS:<br />
<br />
<source lang="CSS"><br />
<style type="text/css" media="all"><br />
@import "/tecfa-people/dks-normal.css";<br />
</style><br />
<link rel="alternate stylesheet"<br />
type="text/css" media="screen"<br />
title="Friendly fonts<br />
" href="/tecfa-people/dks-friendly.css" /><br />
<link rel="alternate stylesheet" type="text/css" media="screen" <br />
title="bigtype" href="/tecfa-people/dks-big.css" /><br />
<link rel="alternate stylesheet" type="text/css" media="screen" <br />
title="Print with URLs" href="/tecfa-people/dks-print-url.css" /><br />
<link rel="alternate stylesheet" type="text/css" media="screen" <br />
title="Print" href="/tecfa-people/dks-print.css" /><br />
<link rel="stylesheet" type="text/css" media="print"<br />
href="/tecfa-people/dks-print.css" /><br />
</source><br />
<br />
=== Importation ===<br />
<br />
On peut importer un fichier CSS depuis un autre fichier CSS ou encore depuis le CSS qui se trouve à l'intérier d'une balise ''style''.<br />
Il s'agit donc aussi d'une alternative au "linking" ci-dessus.<br />
* Source: http://tecfa.unige.ch/guides/css/ex/simple-css4.html simple-css4.html]<br />
<br />
<source lang="CSS"><br />
<style><br />
@import ("simple-css3.css") ;<br />
p.default {margin-right: 3em; margin-left: 3em}<br />
</style><br />
</source><br />
<br />
=== Feuilles de style client-side ===<br />
<br />
* Marche uniquement dans Mozilla et c'est très cool:<br />
* On peut censurer tout ce qu'on aime pas, adapter la page à la vue etc. :)<br />
<br />
Lire: [[:en:Client-side Javascript]]<br />
<br />
== La notion de sélecteurs ==<br />
<br />
Un sélecteur est un "nom" qui indique pour quels éléments d'une page HTML on définit appliquer la règle.<br />
<br />
Chaque règle CSS commence nécessairement par un sélecteur.<br />
<br />
=== Rappel de la syntaxe pour une règle CSS: ===<br />
<br />
<source lang="CSS"><br />
selecteur(s) { propriété: valeur ; propriété: valeur1, valeur2, valeur3 ; ...... }<br />
</source><br />
<br />
Il existe plusieurs méthodes pour identifier les éléments, par exemple:<br />
* on indique le nom d'une balise (X)HTML<br />
* on indique la classe d'une balise (X)HTML<br />
* on indique l'identificateur d'une balise XHTML<br />
* on indique le nom d'une balise plus sa classe, etc.<br />
<br />
=== Simple sélecteurs pour les balises ===<br />
<br />
* On indique le nom d'une balise, ou encore une liste séparés par des virgules.<br />
<source lang="CSS"><br />
H1 {color: green}<br />
H2 {color: green}<br />
</source><br />
<br />
est équivalent à:<br />
<br />
<source lang="CSS"><br />
H1, H2 {color: green}</source><br />
<br />
Dans ce cas on utilise CSS pour changer l'affichage par défaut des différentes balises. Typiquement, on modifie la couleur de certains éléments, la taille des fontes, les marges, etc.<br />
<br />
=== Les balises HTML &lt;div&gt; et &lt;span&gt; ===<br />
<br />
* ont été créés spécialement pour un usage avec les feuilles de style<br />
<br />
==== La balise &lt;div&gt; ====<br />
<br />
peut contenir toutes les autres balises HTML et donc servir à mettre en forme toute une section d'une texte (mais attention aux priorités! '' &lt;div&gt;'' est un bloc alors que '' &lt;span&gt; '' est un élément in-line. Autrement dit:<br />
* &lt;div&gt; avec l'attribut class peut servir à faire des balises sur mesure ("custom tags") du type "ceci est une section" (voir plus loin)<br />
* &lt;span&gt; sert à changer une séquence de caractères à l'intérieur d'une balise et permet donc de créer des "balises" pour la mise en page de mots (fontes, etc.)<br />
<br />
=== Class et attributs ID ===<br />
<br />
'''Les attributs et sélecteurs "class"'''<br />
<br />
L'utilisation d'attributs HTML ''div'' et ''id'' avec des selecteurs de classe et de ID sont des mécanismes puissants pour:<br />
* définir des classes de contenu (indépendamment des balises)<br />
* pour différencier plusieurs variantes d'une même balise<br />
<br />
Principe: Dans le HTML, on associe une valeur à l'attribut "class" pour identifier toutes les balises que l'on veut traiter un peu différement. On peut aussi définir le style des enfants de la balise qui a l'attribut "class", mais il faut indiquer le chemin complet de l'arbre:<br />
ul li<br />
Il est possible de définir plusieurs classes par éléments<br />
<br />
Lorsque deux règles définissent la même propriété, il y a un conflit de définition qui sera réglé par les règles de cascading. Lire plus sur le cascading qui devient très compliqué dans [[:en:CSS tutorial]]. Les débutants ne doivent pas trop s'inquiéter.<br />
<br />
* Les définitions "inline" ont priorité sur les définitions au niveau de la page qui eux ont priorité sur les fichiers importés.<br />
* Parmit ces différent types de définitions, c'est le plus spécifique et aussi le plus récent qui "gagne", (''font-size'' dans l'exemple ci-dessous).<br />
<br />
'''Exemple de classes dans une simple feuille de style''':<br />
<br />
Source: '' http://tecfa.unige.ch/guides/css/ex/simple-css2.html''<br />
<br />
<source lang="html5"><br />
<style type="text/css"><br />
P.intro {color: blue; margin-left: 4em; margin-right: 2em;}<br />
.default ul li {font-size: 0.8em;}<br />
.default {margin-left: 2em; font-size:1em;}<br />
.bleu {color:red;}<br />
</style><br />
......<br />
<p class="intro"><br />
Après des années de bricolage infâme ....<br />
</p><br />
<p class="default bleu"><br />
bla bla<br />
</p><br />
<div class="default"><br />
<ul><br />
<li>item 1</li><br />
<li>item 2</li><br />
</ul><br />
<pre><br />
notre classe default marche partout, même pour un para préformaté<br />
</pre><br />
</div><br />
</source><br />
<br />
Le style '' .default'' s'appliquera à tous les éléments dont la classe est "default" alors que le style '' .intro'' seulement aux balises '' &lt;p&gt;'' .<br />
<br />
'''L'attribut ID'''<br />
<br />
Il est parfois plus approprié d'utiliser l'attribut '''id''' (p.ex. pour positionner un élément ou encore lorsqu'on a un script ne manipule qu'un seul élément)<br />
<br />
On peut aussi combiner les deux (définir un style pour la classe et l'id d'une même balise)<br />
<br />
Syntaxe:<br />
* Le selecteur s'écrit avec un # devant<br />
<br />
==== Wildcard ====<br />
<br />
La "Wildcard" (joker) est le '''*''' et veut dire qu'on définit une règle pour tous les éléments:<br />
<br />
* {font-size: 12pt; }<br />
<br />
C'est pratique pour définir une police par défaut pour tous les éléments sans la définir pour chaque élément HTML.<br />
<br />
'''Exemple de définition "inline" d'un style'''<br />
<br />
Objectif: Changer la couleur d'un partie du texte<br />
<br />
Source: http://tecfa.unige.ch/guides/css/ex/simple-div-span.html simple-div-span.html]<br />
<br />
<source lang="CSS"><br />
<div style="color: blue"><br />
<h1>L'influence d'un div tag qui aime le bleu</h1><br />
<P><br />
bla bla bla<br />
</P><br />
</div><br />
</source><br />
<br />
''' Exemple de définition externe d'un style'''<br />
Objectif: Changer la couleur back-ground (arrière-plan)<br />
<br />
Source: http://tecfa.unige.ch/guides/css/ex/simple-div2.html simple-div2.html]<br />
<source lang="CSS"><br />
<style><br />
div.important {<br />
background: rgb(204,204,255);<br />
padding: 0.5em; border: none;<br />
}<br />
</style><br />
.....<br />
<body><br />
<div class="important"><br />
<h1>Une section importante</h1><br />
<h2>Un sous-titre</h2><br />
<P><br />
Tout le div a son joli background à lui.<br />
bla bla bla<br />
</P><br />
</div><br />
</source><br />
<br />
=== Sélecteurs contextuels ===<br />
<br />
Exemple: Simple utilisation d'un sélecteur contextuel<br />
<br />
Source: http://tecfa.unige.ch/guides/css/ex/simple-css5.html css5.html]<br />
<br />
<source lang="CSS"><br />
<style type="text/css"><br />
p strong {color: red;}<br />
</style><br />
......<br />
<p><br />
<br />
Ceci est un paragraph avec un ''&lt;strong&gt;'' strong modifié ''&lt;/strong&gt;''.<br />
<br />
En d'autres terme cela permet de redéfinir de façon simple le rendering<br />
de certaines balises "logiques" comme &amp;lt;em&amp;gt; ou &amp;lt;strong&amp;gt;.<br />
</p><br />
</source><br />
<br />
=== Pseudo sélecteurs (élément et classes) ===<br />
<br />
* Un pseudo sélecteur identifie un élément par des critères autres que balise et classe<br />
* CSS2 en définit pleins, ci-dessous les éléments de CSS1.<br />
* Attention: certains navigateurs implémentent mal ces fonctionalités CSS1.<br />
<br />
Les Pseudo-éléments:<br />
* permettent d'identifier des éléments non-balisés (comme la première lettre ou la première ligne)<br />
* Marche avec les navigateurs IE 5.5 (à confirmer) et Mozilla<br />
<br />
Exemple: Pseudo-sélecteurs<br />
* source: http://tecfa.unige.ch/guides/css/ex/pseudo-selectors.html pseudo-selectors.html]<br />
<source lang="CSS"><br />
<style><br />
P:first-letter { font-size: 500%; color: green }<br />
P:first-line { color: green }<br />
</style><br />
</source><br />
<br />
==== Pseudo-classes ====<br />
<br />
Pour rendre plus difficile la lecture des liens :)<br />
<br />
<source lang="CSS"><br />
A:link { color : white }<br />
A:visited { color : yellow }<br />
A:active {color : red }<br />
</source><br />
<br />
== Les déclarations CSS ==<br />
<br />
==== Rappel de la syntaxe pour une règle CSS: ====<br />
<br />
selecteur(s) { propriété: valeur ; propriété: valeur1, valeur2, valeur3 ; ...... }<br />
<br />
[[Image:css-intro-2.png]]<br />
<br />
'''Attention:'''Les valeurs des propriétés sont séparées par des "," et les pairs "propriétés: valeurs" sont séparées par des ";"<br />
<br />
Nous allons maintenant introduire<br />
* Types d'élément HTML<br />
* Boites (boxes)<br />
* Positionnement......<br />
<br />
=== Types d'affichage et défauts HTML ===<br />
<br />
Avant de planifier un style, il faut d'abord vérifier que vous utilisez HTML correctement. Par exemple, pour faire des titres, se baser sur '' &lt;h1&gt;'' , '' &lt;h2&gt;'' , '' &lt;h3&gt;'' ... plutôt que sur '' &lt;p&gt;'' ou '' &lt;div&gt;'' .<br />
<br />
En typographie on distingue entre 2-3 types d'affichage (display types) de base:<br />
<br />
# les blocs (blocks), c.a.d. des éléments qui commencent un nouveau paragraphe. Exemples HTML: &lt;p&gt;, &lt;h2&gt;, &lt;div&gt;<br />
# Les listes et leurs éléments sont des blocs spéciaux: &lt;li&gt;<br />
# les "in-line", c.a.d. s'insérant dans un paragraphe. Exemples HTML: &lt;b&gt;, &lt;strong&gt;, &lt;span&gt;<br />
<br />
Blocs, éléments de liste, élément inline etc. sont représentés dans CSS comme des '''boites''' (Angl. "box"). Pour chaque type de boite, il existe un jeu de règles pour définir les marges, la position, les couleurs du texte et de l'arrière-plan. On peut même définir leurs positions absolues sur la page. Donc un bloc est une boite qu'on remplit avec un contenu selon les règles que l'on choisit.<br />
<br />
Il est possible de changer de type, par exemple afficher une liste à puce comme une suite de phrases. Pour redéfinir ces valeurs par défaut:<br />
<source lang="CSS"><br />
display: block;<br />
display: inline;<br />
display: list-item;<br />
</source><br />
<br />
Note: En réalité CSS2 distingue parmi une vingtaine de différents ''display types'', mais il faut surtout retenir la différence entre "Block" (nouvelle ligne) et "inline".<br />
<br />
Exemple CSS positioning où on modifie &lt;li&gt; en "inline" affiché en ligne:<br />
* Source: http://tecfa.unige.ch/guides/css/ex/simple-inline.html simple-inline.html]<br />
<br />
<source lang="CSS"><br />
<style type="text/css" xml:space="preserve"><br />
ul#menu li {<br />
display: inline;<br />
text-align: center;<br />
padding: 2px ;<br />
margin: 0;<br />
width: 19%;<br />
}<br />
</style><br />
</source><br />
<br />
== Attributs du texte ==<br />
<br />
Les attributs les plus utilisés sont les suivants. Il existe pleins d'autres, voir une bonne référence CSS.<br />
<br />
=== Attributs pour la gestion des propriétés d'écriture ===<br />
<br />
{| border="1"<br />
! rowspan="1" colspan="1" |<br />
Attributs<br />
! rowspan="1" colspan="1" |<br />
Valeurs<br />
! rowspan="1" colspan="1" |<br />
sert à définir<br />
! rowspan="1" colspan="1" |<br />
exemple<br />
|-<br />
| rowspan="1" colspan="1" |<br />
font-family<br />
| rowspan="1" colspan="1" |<br />
nom de l'écriture<br />
| rowspan="1" colspan="1" |<br />
police<br />
| rowspan="1" colspan="1" |<br />
'' font-family: Helvetica;''<br />
|-<br />
| rowspan="1" colspan="1" |<br />
<br />
| rowspan="1" colspan="1" |<br />
serif<br />
| rowspan="1" colspan="1" |<br />
famille de police, écriture de type serif<br />
| rowspan="1" colspan="1" |<br />
'' font-family: Times,serif;''<br />
|-<br />
| rowspan="1" colspan="1" |<br />
font-size<br />
| rowspan="1" colspan="1" |<br />
pt, cm<br />
| rowspan="1" colspan="1" |<br />
taille de police<br />
| rowspan="1" colspan="1" |<br />
'' font-size: 14pt;''<br />
|-<br />
| rowspan="1" colspan="1" |<br />
font-style<br />
| rowspan="1" colspan="1" |<br />
<br />
| rowspan="1" colspan="1" |<br />
forme d'écriture<br />
| rowspan="1" colspan="1" |<br />
'' ''<br />
|-<br />
| rowspan="1" colspan="1" |<br />
<br />
| rowspan="1" colspan="1" |<br />
italic<br />
| rowspan="1" colspan="1" |<br />
italique<br />
| rowspan="1" colspan="1" |<br />
'' font-style: italique;''<br />
|-<br />
| rowspan="1" colspan="1" |<br />
font-weight<br />
| rowspan="1" colspan="1" |<br />
de 100 à 900<br />
| rowspan="1" colspan="1" |<br />
épaisseur<br />
| rowspan="1" colspan="1" |<br />
'' font-weight: 500;''<br />
|-<br />
| rowspan="1" colspan="1" |<br />
<br />
| rowspan="1" colspan="1" |<br />
normal<br />
| rowspan="1" colspan="1" |<br />
correspond à la valeur 400<br />
| rowspan="1" colspan="1" |<br />
'' font-weight: normal;''<br />
|-<br />
| rowspan="1" colspan="1" |<br />
<br />
| rowspan="1" colspan="1" |<br />
bold<br />
| rowspan="1" colspan="1" |<br />
correspond à la valeur 700<br />
| rowspan="1" colspan="1" |<br />
'' font-weight: bold;''<br />
|}<br />
<br />
=== Alignement du texte ===<br />
<br />
{| border="1"<br />
! rowspan="1" colspan="1" |<br />
Attributs<br />
! rowspan="1" colspan="1" |<br />
Valeurs<br />
! rowspan="1" colspan="1" |<br />
se charge de<br />
! rowspan="1" colspan="1" |<br />
exemple<br />
|-<br />
| rowspan="1" colspan="1" |<br />
text-align<br />
| rowspan="1" colspan="1" |<br />
<br />
| rowspan="1" colspan="1" |<br />
alignement des paragraphes<br />
| rowspan="1" colspan="1" |<br />
'' ''<br />
|-<br />
| rowspan="1" colspan="1" |<br />
<br />
| rowspan="1" colspan="1" |<br />
left<br />
| rowspan="1" colspan="1" |<br />
aligné à gauche, valeur par défaut<br />
| rowspan="1" colspan="1" |<br />
'' text-align: left;''<br />
|-<br />
| rowspan="1" colspan="1" |<br />
<br />
| rowspan="1" colspan="1" |<br />
center<br />
| rowspan="1" colspan="1" |<br />
centré<br />
| rowspan="1" colspan="1" |<br />
'' text-align: center;''<br />
|-<br />
| rowspan="1" colspan="1" |<br />
<br />
| rowspan="1" colspan="1" |<br />
right<br />
| rowspan="1" colspan="1" |<br />
aligné à droite<br />
| rowspan="1" colspan="1" |<br />
'' text-align: right;''<br />
|-<br />
| rowspan="1" colspan="1" |<br />
<br />
| rowspan="1" colspan="1" |<br />
justify<br />
| rowspan="1" colspan="1" |<br />
justifié en forme de bloc<br />
| rowspan="1" colspan="1" |<br />
'' text-align: jutify;''<br />
|-<br />
| rowspan="1" colspan="1" |<br />
text-indent<br />
| rowspan="1" colspan="1" |<br />
pt, cm<br />
| rowspan="1" colspan="1" |<br />
retrait de la première ligne<br />
| rowspan="1" colspan="1" |<br />
'' text-indent: 1cm;''<br />
|-<br />
| rowspan="1" colspan="1" |<br />
line-height<br />
| rowspan="1" colspan="1" |<br />
pt, cm<br />
| rowspan="1" colspan="1" |<br />
hauteur des lignes<br />
| rowspan="1" colspan="1" |<br />
'' line-height: 14pt;''<br />
|-<br />
| rowspan="1" colspan="1" |<br />
<br />
| rowspan="1" colspan="1" |<br />
valeur relative<br />
| rowspan="1" colspan="1" |<br />
écart entre les lignes par rapport à la taille de l'écriture<br />
| rowspan="1" colspan="1" |<br />
'' line-height: 1.2;''<br />
|}<br />
<br />
<br />
<br />
== Les boites CSS et leur positionnement ==<br />
<br />
<br />
=== Anatomie des boites ===<br />
<br />
Une boite (chaque élément "bloc" '' sauf les tables et autres exeptions qui ont des priorités à part'' ) possède l'anatomie suivante:<br />
<br />
[[Image:css-intro-3.png]]<br />
<br />
Chaque élément correspond à un selecteur CSS qui permet de définir la largeur générale (des 4 cotés) ou encore la largeur de chaque côté. On peut aussi définir dessin et couleur du cadre.<br />
<br />
=== Les bords, les cadres et le couleur ===<br />
<br />
{| border="1"<br />
! rowspan="1" colspan="1" |<br />
Attributs<br />
! rowspan="1" colspan="1" |<br />
Valeurs<br />
! rowspan="1" colspan="1" |<br />
se charge de<br />
! rowspan="1" colspan="1" |<br />
exemple<br />
|-<br />
| rowspan="1" colspan="1" |<br />
margin<br />
| rowspan="1" colspan="1" |<br />
pt, px, cm, %<br />
| rowspan="1" colspan="1" |<br />
4 marges<br />
| rowspan="1" colspan="1" |<br />
'' body {margin:1cm;}''<br />
|-<br />
| rowspan="1" colspan="1" |<br />
margin-top<br />
| rowspan="1" colspan="1" |<br />
<br />
| rowspan="1" colspan="1" |<br />
marge en haut<br />
| rowspan="1" colspan="1" |<br />
'' p {margin-top:10px;}''<br />
|-<br />
| rowspan="1" colspan="1" |<br />
margin-bottom<br />
| rowspan="1" colspan="1" |<br />
<br />
| rowspan="1" colspan="1" |<br />
marge en bas<br />
| rowspan="1" colspan="1" |<br />
'' h3 {margin-bottom:3pt;}''<br />
|-<br />
| rowspan="1" colspan="1" |<br />
margin-left<br />
| rowspan="1" colspan="1" |<br />
<br />
| rowspan="1" colspan="1" |<br />
marge à gauche<br />
| rowspan="1" colspan="1" |<br />
'' img {margin-left:50px;}''<br />
|-<br />
| rowspan="1" colspan="1" |<br />
margin-right<br />
| rowspan="1" colspan="1" |<br />
<br />
| rowspan="1" colspan="1" |<br />
marge à droite<br />
| rowspan="1" colspan="1" |<br />
'' p.citation {margin-right:10pt;}''<br />
|-<br />
| rowspan="1" colspan="1" |<br />
border<br />
| rowspan="1" colspan="1" |<br />
pt,px, cm, %<br />
| rowspan="1" colspan="1" |<br />
largeur du cadre<br />
| rowspan="1" colspan="1" |<br />
'' p {border:5px;}''<br />
|-<br />
| rowspan="1" colspan="1" |<br />
border-top<br />
| rowspan="1" colspan="1" |<br />
<br />
| rowspan="1" colspan="1" |<br />
<br />
| rowspan="1" colspan="1" |<br />
'' h1 {border-top:0.2cm;}''<br />
|-<br />
| rowspan="1" colspan="1" |<br />
etc ...<br />
| rowspan="1" colspan="1" |<br />
<br />
| rowspan="1" colspan="1" |<br />
<br />
| rowspan="1" colspan="1" |<br />
<br />
|-<br />
| rowspan="1" colspan="1" |<br />
border-style<br />
| rowspan="1" colspan="1" |<br />
<br />
| rowspan="1" colspan="1" |<br />
style de cadre<br />
| rowspan="1" colspan="1" |<br />
<br />
|-<br />
| rowspan="1" colspan="1" |<br />
<br />
| rowspan="1" colspan="1" |<br />
solid<br />
| rowspan="1" colspan="1" |<br />
ligne simple<br />
| rowspan="1" colspan="1" |<br />
p {border-style:solid;}<br />
|-<br />
| rowspan="1" colspan="1" |<br />
<br />
| rowspan="1" colspan="1" |<br />
double<br />
| rowspan="1" colspan="1" |<br />
ligne double<br />
| rowspan="1" colspan="1" |<br />
h1 {border-style:double;}<br />
|-<br />
| rowspan="1" colspan="1" |<br />
padding<br />
| rowspan="1" colspan="1" |<br />
pt,px,cm,%,etc<br />
| rowspan="1" colspan="1" |<br />
marge intérieures<br />
| rowspan="1" colspan="1" |<br />
p {padding: 5px;}<br />
|-<br />
| rowspan="1" colspan="1" |<br />
color<br />
| rowspan="1" colspan="1" |<br />
valeur hexa /nom<br />
| rowspan="1" colspan="1" |<br />
couleur d'un élément<br />
| rowspan="1" colspan="1" |<br />
<nowiki>#menu {color:#000000;}</nowiki>body {color:blue;}<br />
|-<br />
| rowspan="1" colspan="1" |<br />
background<br />
| rowspan="1" colspan="1" |<br />
aussi<br />
| rowspan="1" colspan="1" |<br />
couleur de l'arrière-plan<br />
| rowspan="1" colspan="1" |<br />
h1, h2 {background:silver;}<br />
|}<br />
<br />
* Ceci n'est qu'un apperçu !<br />
* Il existe notamment des "shortcuts" qu'on montre sur la page suivante.<br />
<br />
'''Exemple:'''<br />
<br />
<source lang="CSS"><br />
#content {<br />
border-right: 2px dotted black;<br />
border-bottom: 2px dotted black;<br />
color: #000;<br />
background-color: #ffffcc;<br />
padding: 5px 5px 5px 5px; /* haut, droite, bas, gauche */<br />
margin: 5px 15px 5px 5px;<br />
}<br />
<br />
H1 {<br />
/* 1 cm en haut et en bas, 2cm sur les côtés */<br />
margin: 1cm 2cm;<br />
/* 3em en haut, 20% sur les côtés, et 2em en bas */<br />
padding: 3em 20% 2em;<br />
}<br />
</source><br />
<br />
'''Plusieurs exemples simples avec des boites'''<br />
* Source: [http://tecfa.unige.ch/guides/css/ex/boxing0.html boxing0.html]<br />
* la boite pour le "body" a des lignes pointillés<br />
* la boite pour un &lt;p&gt; a une petite marge, un bord solide, et une couleur en arrière-plan<br />
* une partie de ce meme paragraphe est mis dans une boite avec un "span"<br />
<br />
<source lang="CSS"><br />
<body style="border-style:dotted"><br />
<h1>Boites</h1><br />
<p>The dashed box is for the "body", the big thick box is for a "p" tag, <br />
and the thin box is used within a "span" tag. (View the source).</p><br />
<p style="background-color:#d0d0d0;border-style:solid;border-width:4px;<br />
padding:1em;margin:0.1cm; "><br />
Tout est une boite - DKS nov 2003<br />
<span style="background-color:#d0d0d0;border-style:solid;border-width:1px;<br />
padding:1pt;margin:1pt;width:50%;position:relative"><br />
<a href="http://validator.w3.org/check/referer">XHTML validation</a> -<br />
<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS validation<a><br />
</span><br />
</p><br />
<p>Voir <a href="http://tecfa.unige.ch/guides/css/ex/boxing1.html">boxing1.html</a> pour plus ... </p><br />
</body><br />
</source><br />
<br />
=== Le positionnement ===<br />
<br />
* Par défaut les éléments d'une page HTML sont affichés séquentiellement un après l'autre<br />
* Mais on peut les positionner selon des coordonnées absolues ou relatives n'importe où sur une page (voir les exemples qui suivent)<br />
<br />
<source lang="CSS"><br />
#content { /* les coordonnees selon l'horloge: 12, 3, 6, 9 */<br />
float: left;<br />
width: 80%;<br />
color: #000;<br />
background-color: #ffffcc;<br />
padding: 5px 5px 5px 5px;<br />
margin: 5px 5px 5px 5px;<br />
}<br />
<br />
#menu { /* qui sera mis à droite */<br />
position: absolute;<br />
right: 0;<br />
width: 17%;<br />
font: 10px/14px verdana, sans-serif;<br />
color: black;<br />
margin: 5px 5px 5px 5px;<br />
background-color: #ffffff;<br />
}<br />
</source><br />
<br />
'''Exemple: Positionnement relatif de boites flottantes'''<br />
* http://tecfa.unige.ch/guides/css/ex/boxing1.html<br />
<br />
'''Exemple: Positionnement relatif horizontal + vertical'''<br />
* [http://tecfa.unige.ch/guides/css/ex/boxing2.html http://tecfa.unige.ch/guides/css/ex/boxing2.html]<br />
<br />
'''Exemple: Un menu: "ul/li" comme boutons''':<br />
* [http://tecfa.unige.ch/guides/css/ex/boxing3.html http://tecfa.unige.ch/guides/css/ex/boxing3.html]<br />
<br />
'''Exemple: Positions absolues'''<br />
* [http://tecfa.unige.ch/guides/css/ex/boxing4.html http://tecfa.unige.ch/guides/css/ex/boxing4.html]<br />
<br />
'''Exemple: Layout 3-colonnes'''<br />
* http://tecfa.unige.ch/guides/css/ex/boxing5.html<br />
<br />
== XML avec CSS ==<br />
<br />
=== Association d'une feuille de style ===<br />
<br />
* Il est conseillé d'utiliser une feuille externe et ensuite l'importer:<br />
<br />
<?xml-stylesheet type="text/css" href="feuille.css"?><br />
<br />
* note: pas de feuilles de styles internes comme pour HTML !<br />
<br />
Voici le début d'un fichier:<br />
<br />
<pre><br />
<?xml version="1.0" encoding="ISO-8859-1"?><br />
<?xml-stylesheet href="stepbystep.css" type="text/css"?><br />
<!DOCTYPE Stepbystep SYSTEM "stepbystep-ex.dtd"><br />
<Stepbystep xmlns:xlink="http://www.w3.org/1999/xlink"><br />
<Doctitle>ATTENTION: Il ne s'agit ici que d'une démo XML + CSS. L'original de ce fichier se trouve<br />
<br />
ailleurs et a été modifié sans doute depuis ....<br />
</Doctitle><br />
<Info><br />
<Author Email="Stephane.morand@tecfa.unige.ch"><br />
</Author><br />
<Version>Version 0.2</Version><br />
<Para>installation brute de postnuke sur le serveur tecfaseed<br />
</Para><br />
</Info><br />
</pre><br />
<br />
=== Selecteurs CSS2 pour XML et HTML ===<br />
<br />
* XML nécessite un navigateur qui supporte CSS2 (au moins en partie)<br />
* A part la notation '' Balise.classe'' les sélecteur XML et HTML sont les mêmes !<br />
<br />
==== sélection d'un élément ====<br />
<br />
nom_de_l'élément<br />
<br />
'''Exemple:'''<br />
Step {<br />
display: list-item;<br />
list-style-type: decimal;<br />
}<br />
<br />
==== sélection d'un élément qui est l''' enfant direct'' d'un élément ====<br />
<br />
élément_mère &gt; élément<br />
<br />
Exemple:<br />
<br />
Step > Title { .... }<br />
<br />
==== sélection d'un élément qui est le '' descendant'' d'un élément ====<br />
<br />
élément_mère élément<br />
<br />
Exemple:<br />
<br />
Step Title { .... }<br />
<br />
Dans l'exemple suivant P est un descendant de LI, LI doit être un enfant direct de OL. OL est dans DIV. <br />
<br />
DIV OL>LI P<br />
<br />
==== sélection d'un élément qui est le '' frère'' d'un élément ====<br />
<br />
élément_frère + élément<br />
<br />
Exemple:<br />
H1 + H2 { margin-top: -5mm }<br />
(on réduit la distance)<br />
<br />
==== sélection d'un élément qui possède un attribut ====<br />
<br />
élément[attribut]<br />
<br />
Exemple:<br />
<br />
Title[status] { color: blue; }<br />
<br />
(tous les titres qui un attribut "status" sont paints en bleu )<br />
<br />
==== sélection d'un élément qui possède un attribut avec une valeur ====<br />
<br />
élément[attribut="valeur"]<br />
<br />
Exemple:<br />
<br />
Title[status="brouillon"] { color: red; }<br />
<br />
(tous les titres qui un attribut "status" avec valeur "brouillon" sont peints en rouge )<br />
<br />
Note: au lieu de "=", on a aussi ~= et ¦= (voir la documentation)<br />
<br />
=== Premières opérations à faire ===<br />
<br />
* Il faut d'abord indiquer pour chaque élément s'il est un "block" ou "inline"<br />
* Faire sortir les titres<br />
* Gérer les listes<br />
<br />
==== Exemples ====<br />
<br />
/* title et para sont des éléments "block", ils ont une petite marge<br />
title, para {display: block; margin: 0.5em;}<br />
/* les title sont un peu plus grands */<br />
title {font-size: 1.5em;}<br />
/* les item sont des list-item de type bullet */<br />
item {display: list-item;list-style-type: bullet;}<br />
/* strong est un élément inline, rendering on italic et bleu */<br />
strong {display: inline; font-style: italic; color: rgb(000,000,128);}<br />
<br />
'''Exemple "Stepbystep"'''<br />
<br />
* '' http://tecfa.unige.ch/guides/css/ex-xml/stepbystep/''<br />
<br />
(répertoire avec tous les fichiers)<br />
<br />
* Le DTD Stebbystep permet de formatter des instructions de type "pas par pas", par exemple comment installer un logiciel.<br />
<br />
'''Exemple Récit'''<br />
<br />
* '' http://tecfa.unige.ch/guides/xml/examples/recit/''<br />
( répetoire avec une solution CSS et une solution XSLT )<br />
<br />
* La DTD "RECIT" permet d'écrire des simples récits avec une grammaire génératrice.<br />
<br />
== Liens ==<br />
<br />
=== Ressources CSS ===<br />
<br />
Voir aussi:<br />
* [[Liens CSS]] (ce wiki)<br />
* [[:en:CSS links|CSS links]] (Edutechwiki - Anglais)<br />
<br />
; Extensions FireFox <br />
* [https://addons.mozilla.org/en-US/firefox/addon/60 Web developper] (menu: ''OUtils->Web developer->CSS->View Style Information'', ensuite cliquer partout dans la page et regarder les infos)<br />
* [https://addons.mozilla.org/en-US/firefox/addon/13048 Codeburner for Firefox] Une référence HTML/CSS intégrée au navigateur<br />
<br />
; Online Manuals<br />
* [http://reference.sitepoint.com/css CSS Reference] at SitePoint<br />
* [http://www.htmlpedia.org/wiki/List_of_CSS_Properties List of CSS Properties] at HTMLPedia<br />
<br />
; Standards<br />
* [http://www.w3.org/Style/CSS/ http://www.w3.org/Style/CSS/] (CSS page of the W3C)<br />
* http://www.w3.org/TR/REC-CSS2/ (CSS 2 specification)<br />
<br />
; Compatibility tables<br />
: http://www.quirksmode.org/css/contents.html (consult this for IE 6/7! in particular)<br />
<br />
; CSS Validator (à utiliser SVP !!)<br />
: [http://jigsaw.w3.org/css-validator/ http://jigsaw.w3.org/css-validator/]<br />
<br />
; Slides<br />
<br />
* [http://tecfa.unige.ch/guides/tie/html/css-intro/css-intro.html http://tecfa.unige.ch/guides/tie/html/css-into/css-intro.html] (Transparents HTML)<br />
* http://tecfa.unige.ch/guides/tie/pdf/files/css-intro.pdf (Transparents PDF)<br />
<br />
; Version anglaise<br />
<br />
* [[:en:CSS tutorial|CSS tutorial]] (probablement de meilleure qualité)<br />
<br />
[[Category: Tutoriels]]<br />
[[Category: Ressources STIC]]<br />
[[en:CSS tutorial]]</div>Alfred Baillyhttps://edutechwiki.unige.ch/fmediawiki/index.php?title=Utilisateur:Alfred_Bailly&diff=29847Utilisateur:Alfred Bailly2013-09-28T12:45:21Z<p>Alfred Bailly : </p>
<hr />
<div>== Présentation succincte ==<br />
Né en 1957 à Londres, j'ai passé ma vie en Suisse. Je suis marié et père de deux enfants, et beau-père de trois.<br />
<br />
=== Expériences de vie ===<br />
Après différentes expériences en termes de métier : bureau, ouvrier agricole, chantier, usine durant une dizaine d'années, j'ai commencé dans le travail social que j'ai pratiqué durant 25 ans. Je suis, depuis 2010, responsable de formation à l'és-L, école supérieure en éducation sociale. J'ai obtenu au fil des ans, un diplôme d'éducateur, un certificat d'études avancées en handicap mental ainsi qu'en interventions systémiques puis une licence en sciences humaines et sociales, option sciences de l’éducation.<br />
<br />
=== Horizon ===<br />
Je suis actuellement étudiant à TECFA, inscrit au MALTT dans l'idée, déjà un peu appliquée en ce moment, d'accompagner les étudiants de l'és-L à distance lorsqu'ils sont sur leur lieu de pratique.<br />
<br />
Compte tenu que les étudiants que j'accompagne suivent leur formation en douze modules étalés en dix-huit sessions, ils sont, entre les cours, sur leur lieu de travail. Ils peuvent y rencontrer des difficultés sur lesquelles il serait certainement intéressant d'échanger. En effet, en tant que responsable de formation, je suis aussi concerné par la pratique de terrain et peux être une personne ressource pour les problématiques rencontrées :<br />
:<br />
*avec les bénéficiaires<br />
*avec un/des collègue/s<br />
*avec la direction de l'institution<br />
<br />
=== Mes ressources ===<br />
Ma pratique professionnelle est liée à l'accompagnement:<br />
# de personnes en milieu psychiatrique, <br />
# milieu de la déficience intellectuelle, spécialement pour la question de l'[[Autodétermination]]<br />
# l'enfance<br />
<br />
== Ma philosophie de vie ==<br />
Aussi loin que je puisse remonter dans mon passé, dans mon temps perçu, je me suis posé des questions existentielles en lien avec ce qu'est une vie bonne, belle et juste; quelle est la cause de la vie, de la conscience ? Ce n'est donc pas un hasard que je me sois retrouvé éducateur même si, lorsque j'ai commencé ce métier, je n'avais pas conscience de ce qui animait ma motivation. Au fil des années, ma philosophie de vie et mon métier d'éducateur se sont intriqués l'une évoluant grâce à des lectures, à la théorie donc, et à l'expérience de l'autre de manière circulaire.<br />
<br />
Tant sur le plan privé que professionnel, j'ai agi, je me suis trompé, j'ai réagi, j'ai évolué pour arriver aujourd'hui et généralement à une certaine stabilité d'humeur, de réflexion et de capacité à l'action. J'ai fait un bout de chemin et sais qu'il me reste de la route. J'aime marcher et c'est donc un privilège et un plaisir de pouvoir continuer d'avancer. Je pense aussi que vivre, c'est apprendre et qu'apprendre permet de vivre avec plus de conscience voire en pleine conscience. Même si donc nous vivons dans un monde d'informations où certains modes de savoirs sont omniprésents : la presse, la télévision, la radio, etc, apprendre de façon consciente passe par l'étude proprement dite que cela soit en autodidacte qu'académiquement.</div>Alfred Baillyhttps://edutechwiki.unige.ch/fmediawiki/index.php?title=Utilisateur:Alfred_Bailly&diff=29584Utilisateur:Alfred Bailly2013-09-22T19:09:41Z<p>Alfred Bailly : </p>
<hr />
<div>== Présentation succincte ==<br />
Né en 1957 à Londres, j'ai passé ma vie en Suisse. Je suis marié et père de deux enfants, et beau-père de trois.<br />
<br />
=== Expériences de vie ===<br />
Après différentes expériences en termes de métier : bureau, ouvrier agricole, chantier, usine durant une dizaine d'années, j'ai commencé dans le travail social que j'ai pratiqué durant 25 ans. Je suis, depuis 2010, responsable de formation à l'és-L, école supérieure en éducation sociale. J'ai obtenu au fil des ans, un diplôme d'éducateur, un certificat d'études avancées en handicap mental ainsi qu'en interventions systémiques puis une licence en sciences humaines et sociales, option sciences de l’éducation.<br />
<br />
=== Horizon ===<br />
Je suis actuellement étudiant à TECFA dans l'idée, un peu appliquée en ce moment, d'accompagner les étudiants de l'és-L à distance lorsqu'ils sont sur leur lieu de pratique.<br />
<br />
Compte tenu que les étudiants que j'accompagne suivent leur formation en douze modules étalés en dix-huit sessions, ils sont, entre les cours, sur leur lieu de travail. Ils peuvent y rencontrer des difficultés sur lesquelles il serait certainement intéressant d'échanger. En effet, en tant que responsable de formation, je suis aussi concerné par la pratique de terrain et peux être une personne ressource pour les problématiques rencontrées :<br />
:<br />
*avec les bénéficiaires<br />
*avec un/des collègue/s<br />
*avec la direction de l'institution<br />
<br />
=== Mes ressources ===<br />
Ma pratique professionnelle est liée à l'accompagnement:<br />
# de personnes en milieu psychiatrique, <br />
# milieu de la déficience intellectuelle, spécialement pour la question de l'[[Autodétermination]]<br />
# l'enfance<br />
<br />
== Ma philosophie de vie ==<br />
Aussi loin que je puisse remonter dans mon passé, dans mon temps perçu, je me suis posé des questions existentielles en lien avec ce qu'est une vie bonne, belle et juste; quelle est la cause de la vie, de la conscience ? Ce n'est donc pas un hasard que je me sois retrouvé éducateur même si, lorsque j'ai commencé ce métier, je n'avais pas conscience de ma motivation. Au fil des années, ma philosophie de vie et mon métier d'éducateur se sont intriqués l'une évoluant grâce à des lectures, à la théorie donc, et à l'expérience de l'autre de manière circulaire.<br />
<br />
Tant sur le plan privé que professionnel, j'ai agi, je me suis trompé, j'ai réagi, j'ai évolué pour arriver aujourd'hui et généralement à une certaine stabilité d'humeur, de réflexion et de capacité à l'action. J'ai fait un bout de chemin et sais qu'il me reste de la route. J'aime marcher et c'est donc un privilège et un plaisir de pouvoir continuer d'avancer. J'ai encore l'intention et le désir de faire beaucoup de choses mais me sens prêt, le cas échéant, à rencontrer la mort si celle-ci devait survenir. Je dis cela dans un état d'âme serein et optimiste, la mort n'épargnant personne.</div>Alfred Baillyhttps://edutechwiki.unige.ch/fmediawiki/index.php?title=Utilisateur:Alfred_Bailly&diff=29583Utilisateur:Alfred Bailly2013-09-22T19:06:58Z<p>Alfred Bailly : </p>
<hr />
<div>== Présentation succincte ==<br />
Né en 1957 à Londres, j'ai passé ma vie en Suisse. Je suis marié et père de deux enfants, et beau-père de trois.<br />
<br />
=== Expériences de vie ===<br />
Après différentes expériences en termes de métier : bureau, ouvrier agricole, chantier, usine durant une dizaine d'années, j'ai commencé dans le travail social que j'ai pratiqué durant 25 ans. Je suis, depuis 2010, responsable de formation à l'és-L, école supérieure en éducation sociale. J'ai obtenu au fil des ans, un diplôme d'éducateur, un certificat d'études avancées en handicap mental ainsi qu'en interventions systémiques puis une licence en sciences humaines et sociales, option sciences de l’éducation.<br />
<br />
=== Horizon ===<br />
Je suis actuellement étudiant à TECFA dans l'idée, un peu appliquée en ce moment, d'accompagner les étudiants de l'és-L à distance lorsqu'ils sont sur leur lieu de pratique.<br />
<br />
Compte tenu que les étudiants que j'accompagne suivent leur formation en douze modules étalés en dix-huit sessions, ils sont, entre les cours, sur leur lieu de travail. Ils peuvent y rencontrer des difficultés sur lesquelles il serait certainement intéressant d'échanger. En effet, en tant que responsable de formation, je suis aussi concerné par la pratique de terrain et peux être une personne ressource pour les problématiques rencontrées :<br />
:<br />
*avec les bénéficiaires<br />
*avec un/des collègue/s<br />
*avec la direction de l'institution<br />
<br />
=== Mes ressources ===<br />
Ma pratique professionnelle est liée à l'accompagnement:<br />
# de personnes en milieu psychiatrique, <br />
# milieu de la déficience intellectuelle, spécialement pour la question de l'[[Autodétermination]]<br />
# l'enfance<br />
<br />
== Ma philosophie de vie ==<br />
Aussi loin que je puisse remonter dans mon passé, dans mon temps perçu, je me suis posé des questions existentielles en lien avec qu'est-ce qu'un vie bonne, belle et juste; quelle est la cause de la vie, de la conscience ? Ce n'est donc pas un hasard que je me sois retrouvé éducateur même si, lorsque j'ai commencé, je n'avais pas conscience de ma motivation profonde. Au fil des années, ma philosophie de vie et mon métier d'éducateur se sont intriqués l'une évoluant grâce à l'expérience de l'autre de manière circulaire.<br />
<br />
Tant sur le plan privé que professionnel, j'ai agi, je me suis trompé, j'ai réagi, j'ai évolué pour arriver aujourd'hui et généralement à une certaine stabilité d'humeur, de réflexion et de capacité à l'action. J'ai fait un bout de chemin et sais qu'il me reste de la route. J'aime marcher et c'est donc un privilège et un plaisir de pouvoir continuer d'avancer. J'ai encore l'intention et le désir de faire beaucoup de choses mais me sens prêt, le cas échéant, à rencontrer la mort si celle-ci devait survenir. Je dis cela dans un état d'âme serein et optimiste, la mort n'épargnant personne.</div>Alfred Baillyhttps://edutechwiki.unige.ch/fmediawiki/index.php?title=Utilisateur:Alfred_Bailly&diff=29557Utilisateur:Alfred Bailly2013-09-21T19:52:33Z<p>Alfred Bailly : </p>
<hr />
<div>== Présentation succincte ==<br />
Né en 1957 à Londres, j'ai passé ma vie en Suisse. Je suis marié et père de deux enfants, et beau-père de trois.<br />
<br />
=== Expériences de vie ===<br />
Après différentes expériences en termes de métier : bureau, ouvrier agricole, chantier, usine durant une dizaine d'années, j'ai commencé dans le travail social que j'ai pratiqué durant 25 ans. Je suis, depuis 2010, responsable de formation à l'és-L, école supérieure en éducation sociale. J'ai obtenu au fil des ans, un diplôme d'éducateur, un certificat d'études avancées en handicap mental ainsi qu'en interventions systémiques puis une licence en sciences humaines et sociales, option sciences de l’éducation.<br />
<br />
=== Horizon ===<br />
Je suis actuellement étudiant à TECFA dans l'idée, un peu appliquée en ce moment, d'accompagner les étudiants de l'és-L à distance lorsqu'ils sont sur leur lieu de pratique.<br />
<br />
Compte tenu que les étudiants que j'accompagne suivent leur formation en douze modules étalés en dix-huit sessions, ils sont, entre les cours, sur leur lieu de travail. Ils peuvent y rencontrer des difficultés sur lesquelles il serait certainement intéressant d'échanger. En effet, en tant que responsable de formation, je suis aussi concerné par la pratique de terrain et peux être une personne ressource pour les problématiques rencontrées :<br />
:<br />
*avec les bénéficiaires<br />
*avec un/des collègue/s<br />
*avec la direction de l'institution<br />
<br />
=== Mes ressources ===<br />
Ma pratique professionnelle est liée à l'accompagnement:<br />
# de personnes en milieu psychiatrique, <br />
# milieu de la déficience intellectuelle, spécialement pour la question de l'[[Autodétermination]]<br />
# l'enfance</div>Alfred Baillyhttps://edutechwiki.unige.ch/fmediawiki/index.php?title=Utilisateur:Alfred_Bailly&diff=29555Utilisateur:Alfred Bailly2013-09-19T21:30:31Z<p>Alfred Bailly : </p>
<hr />
<div>== Présentation succincte ==<br />
Né en 1957 à Londres, j'ai passé ma vie en Suisse. Je suis marié et père de deux enfants, et beau-père de trois.<br />
<br />
=== Expériences de vie ===<br />
Après différentes expériences en termes de métier : bureau, ouvrier agricole, chantier, usine durant une dizaine d'années, j'ai commencé dans le travail social que j'ai pratiqué durant 25 ans. Je suis, depuis 2010, responsable de formation à l'és-L, école supérieure en éducation sociale. J'ai obtenu au fil des ans, un diplôme d'éducateur, un certificat d'études avancées en handicap mental ainsi qu'en interventions systémiques puis une licence en sciences humaines et sociales, option sciences de l’éducation.<br />
<br />
=== Horizon ===<br />
Je suis actuellement étudiant à TECFA dans l'idée, un peu appliquée en ce moment, d'accompagner les étudiants de l'és-L à distance lorsqu'ils sont sur leur lieu de pratique.<br />
<br />
Compte tenu que les étudiants que j'accompagne suivent leur formation en douze modules étalés en dix-huit sessions, ils sont, entre les cours, sur leur lieu de travail. Ils peuvent y rencontrer des difficultés sur lesquelles il serait certainement intéressant d'échanger. En effet, en tant que responsable de formation, je suis aussi concerné par la pratique de terrain et peux être une personne ressource tel que :<br />
* problématiques rencontrées <br />
:avec les bénéficiaires<br />
:avec un/des collègue/s<br />
:avec la direction de l'institution<br />
<br />
=== Mes ressources ===<br />
Ma pratique professionnelle est liée à l'accompagnement:<br />
# de personnes en milieu psychiatrique, <br />
# milieu de la déficience intellectuelle, spécialement pour la question de l'[[Autodétermination]]<br />
# l'enfance</div>Alfred Baillyhttps://edutechwiki.unige.ch/fmediawiki/index.php?title=Utilisateur:Alfred_Bailly&diff=29554Utilisateur:Alfred Bailly2013-09-19T21:10:15Z<p>Alfred Bailly : </p>
<hr />
<div>== Présentation succincte ==<br />
Né en 1957 à Londres, j'ai passé ma vie en Suisse. Je suis marié et père de deux enfants, et beau-père de trois.<br />
<br />
=== Expériences de vie ===<br />
Après différentes expériences en termes de métier, bureau, ouvrier agricole, chantier, usine durant une dizaine d'années, j'ai commencé dans le travail social que j'ai pratiqué durant 25 ans. Je suis, depuis 2010, responsable de formation à l'és-L, école supérieure en éducation sociale. J'ai obtenu au fil des ans, un diplôme d'éducateur, un certificat d'études avancées en handicap mental ainsi qu'en interventions systémiques puis une licence en sciences humaines et sociales, option sciences de l’éducation.<br />
<br />
=== Horizon ===<br />
Je suis actuellement étudiant à TECFA dans l'idée, un peu appliquée en ce moment, d'accompagner les étudiants de l'és-L à distance lorsqu'ils sont sur leur lieu de pratique.<br />
<br />
Compte tenu que les étudiants que j'accompagne suivent leur formation en douze modules étalés en dix-huit sessions, ils sont, entre les cours, sur leur lieu de travail. Ils peuvent y rencontrer des difficultés sur lesquelles il serait certainement intéressant d'échanger. En effet, en tant que responsable de formation, je suis aussi concerné par la pratique de terrain et peux être une personne ressource tel que :<br />
* problématiques rencontrées <br />
:avec les bénéficiaires<br />
:avec un/des collègue/s<br />
:avec la direction de l'institution<br />
<br />
=== Mes ressources ===<br />
Ma pratique professionnelle est liée à l'accompagnement:<br />
# de personnes en milieu psychiatrique, <br />
# milieu de la déficience intellectuelle, spécialement pour la question de l'[[Autodétermination]]<br />
# l'enfance</div>Alfred Baillyhttps://edutechwiki.unige.ch/fmediawiki/index.php?title=Utilisateur:Alfred_Bailly&diff=29542Utilisateur:Alfred Bailly2013-09-19T15:00:09Z<p>Alfred Bailly : </p>
<hr />
<div>== Présentation succincte ==<br />
Né en 1957 à Londres, j'ai passé ma vie en Suisse. <br />
<br />
=== Expériences de vie ===<br />
Après différentes expériences en termes de métier, bureau, ouvrier agricole, chantier, usine durant une dizaine d'années, j'ai commencé dans le travail social que j'ai pratiqué durant 25 ans. Je suis, depuis 2010, responsable de formation à l'és-L, école supérieure en éducation sociale. J'ai obtenu au fil des ans, un diplôme d'éducateur, un certificat d'études avancées en handicap mental ainsi qu'en interventions systémiques puis une licence en sciences humaines et sociales, option sciences de l’éducation.<br />
<br />
=== Horizon ===<br />
Je suis actuellement étudiant à TECFA dans l'idée, un peu appliquée en ce moment, d'accompagner les étudiants de l'és-L en présentiel et à distance.<br />
<br />
Compte tenu que les étudiants que j'accompagne suivent leur formation en douze modules étalés en dix-huit sessions, ils sont, entre les cours, sur leur lieu de travail. Ils peuvent y rencontrer des difficultés sur lesquelles il serait intéressant pouvoir échanger. En effet, en tant que responsable de formation, je suis aussi concerné par la pratique de terrain et peux être une personne de conseil tel que :<br />
* problématiques rencontrées <br />
:avec les bénéficiaires<br />
:avec un/des collègue/s<br />
:avec la direction de l'institution<br />
<br />
=== Mes ressources ===<br />
Ma pratique professionnelle est liée à l'accompagnement:<br />
# de personnes en milieu psychiatrique, <br />
# milieu de la déficience intellectuelle, spécialement pour la question de l'[[Autodétermination]]<br />
# l'enfance</div>Alfred Baillyhttps://edutechwiki.unige.ch/fmediawiki/index.php?title=Utilisateur:Alfred_Bailly&diff=29512Utilisateur:Alfred Bailly2013-09-19T14:48:41Z<p>Alfred Bailly : </p>
<hr />
<div>== Présentation succincte ==<br />
Né en 1957 à [[Londres]], j'ai passé ma vie en Suisse. <br />
<br />
=== Expériences de vie ===<br />
Après différentes expériences en termes de métier, bureau, ouvrier agricole, chantier, usine durant une dizaine d'années, j'ai commencé dans le travail social que j'ai pratiqué durant 25 ans. Je suis, depuis 2010, responsable de formation à l'és-L, école supérieure en éducation sociale. J'ai obtenu au fil des ans, un diplôme d'éducateur, un certificat d'études avancées en handicap mental ainsi qu'en interventions systémiques puis une licence en sciences humaines et sociales, option sciences de l’éducation.<br />
<br />
=== Horizon ===<br />
Je suis actuellement étudiant à [[TECFA]] dans l'idée, un peu appliquée en ce moment, d'accompagner les étudiants de l'és-L en présentiel et à distance.<br />
<br />
Compte tenu que les étudiants que j'accompagne suivent leur formation en douze modules étalés en dix-huit sessions, ils sont, entre les cours, sur leur lieu de travail. Ils peuvent y rencontrer des difficultés sur lesquelles il serait intéressant pouvoir échanger. En effet, en tant que responsable de formation, je suis aussi concerné par la pratique de terrain et peux être une personne de conseil tel que :<br />
* problématiques rencontrées <br />
:avec les bénéficiaires<br />
:avec un/des collègue/s<br />
:avec la direction de l'institution</div>Alfred Baillyhttps://edutechwiki.unige.ch/fmediawiki/index.php?title=Utilisateur:Alfred_Bailly&diff=29422Utilisateur:Alfred Bailly2013-09-19T13:07:04Z<p>Alfred Bailly : </p>
<hr />
<div>Né en 1957 à Londres, j'ai passé ma vie en Suisse. Après différentes expériences en termes de métier, bureau, ouvrier agricole, chantier, usine durant une dizaine d'années, j'ai commencé dans le travail social que j'ai pratiqué durant 25 ans. Je suis, depuis 2010, responsable de formation à l'és-L, école supérieure en éducation sociale. J'ai obtenu au fil des ans, un diplôme d'éducateur, un certificat d'études avancées en handicap mental ainsi qu'en interventions systémiques puis une licence en sciences humaines et sociales, option sciences de l’éducation. Je suis actuellement étudiant à TECFA dans l'idée, un peu appliquée en ce moment, d'accompagner les étudiants de l'és-L en présentiel et à distance.</div>Alfred Baillyhttps://edutechwiki.unige.ch/fmediawiki/index.php?title=Utilisateur:Alfred_Bailly&diff=29418Utilisateur:Alfred Bailly2013-09-19T12:55:40Z<p>Alfred Bailly : </p>
<hr />
<div>Né en 1957 à Londres, j'ai passé ma vie en Suisse. Après différentes expériences en termes de métier, bureau, ouvrier agricole, chantier, usine durant une dizaine d'années, j'ai commencé dans le travail social où j'ai pratiqué durant 25 ans. Je suis, depuis 2010, responsable de formation à l'és-L, école supérieure en éducation sociale. J'ai obtenu au fil des ans, un diplôme d'éducateur, différents certificats ainsi qu'une licence en Sciences humaines et sociales, option Sciences de l’Éducation. Je suis actuellement étudiant à TECFA dans l'idée, un peu appliquée en ce moment, d'accompagner les étudiants de l'és-L.</div>Alfred Baillyhttps://edutechwiki.unige.ch/fmediawiki/index.php?title=Utilisateur:Alfred_Bailly&diff=29417Utilisateur:Alfred Bailly2013-09-19T12:53:12Z<p>Alfred Bailly : Léger changement dans la biographie</p>
<hr />
<div>Né en 1957 à Londres, j'ai passé ma vie en Suisse. Après différents petits boulots durant une dizaine d'années, j'ai commencé dans le travail social où j'ai pratiqué durant 25 ans. Je suis, depuis 2010, responsable de formation à l'és-L, école supérieure en éducation sociale. J'ai obtenu au fil des ans, un diplôme d'éducateur, différents certificats ainsi qu'une licence en Sciences humaines et sociales, option Sciences de l’Éducation. Je suis actuellement étudiant à TECFA dans l'idée, un peu appliquée en ce moment, d'accompagner les étudiants de l'és-L.</div>Alfred Bailly