TICE, Web 2.0, lo...
Follow
86.7K views | +126 today
TICE, Web 2.0, logiciels libres
Les infos sur l'actualité des TICE et des usages du numérique dans l'enseignement. Canopé de l'Aude                                                       Sur Twitter :  @CDDP11  https://twitter.com/CDDP11
Curated by Alain MICHEL
Your new post is loading...
Scoop.it!

Notepad++ - Excellent éditeur de texte

Notepad++ - Excellent éditeur de texte | TICE, Web 2.0, logiciels libres | Scoop.it

Notepad++ est un éditeur de code source qui prend en charge plusieurs dizaines de langages.

Ce programme a pour vocation de fournir un éditeur de code source de taille réduite mais très performant.

 - Coloration Syntaxique et Relief Syntaxique(Syntax Folding)
 - Langage Défini par utilisateur
 - Auto-complétion
 - Multi-documents (Les onglets)
 - Multi-vues

etc.

Alain MICHEL's insight:

Découvrez (ou redécouvrez) cet excellent éditeur de texte (et de code source, donc) archi-complet, gratuit, libre, en français.

more...
No comment yet.
Scoop.it!

Color Explorer : générer une palette de couleurs à partir d'une image

Color Explorer : générer une palette de couleurs à partir d'une image | TICE, Web 2.0, logiciels libres | Scoop.it
Extract spot colors from any image
Alain MICHEL's insight:

Un outil en ligne très simple à utiliser, qui extrait la palette de couleurs d'une image qu'on lui soumet et propose les codes hexadécimaux ainsi que les valeurs RGB des couleurs obtenues. Il est possible de choisir le nombre de couleurs voulues.
Utile pour le webdesign, pour la conception d'une charte graphique...


Tant que j'y suis, un autre site, similaire :

http://www.colorhunter.com/

more...
No comment yet.
Scoop.it!

EmbedPlus : Personnalisez le code d'intégration des vidéos de YouTube

EmbedPlus : Personnalisez le code d'intégration des vidéos de YouTube | TICE, Web 2.0, logiciels libres | Scoop.it
How to enhance YouTube video embedding and SEO on WordPress and other platforms.
Alain MICHEL's insight:

Excellent service en ligne gratuit qui permet de personnaliser le code d'intégration d'une vidéo YouTube dans une page web. Il est ainsi possible :

  • de déterminer un instant de début et un instant de fin de lecture si on n'a besoin que d'un extrait de la vidéo,
  • de rajouter des "marqueurs" à des instants précis sur la vidéo de façon à la découper en chapitres que l'on pourra retrouver en un clic,
  • de rajouter des annotations à des moments précis sur la vidéo,
  • de zoomer dans la vidéo sans stopper la lecture.
  • de lire la vidéo au ralenti.


Tout se fait très simplement en 4 étapes :

  • je déclare si le code d'intégration est destiné à un blog WordPress ou non,
  • je colle l'adresse URL de la vidéo YouYube,
  • je personnalise en choisissant éventuellement le moment de début et de fin de lecture, en posant mes marqueurs, en rajoutant des annotations, etc.
  • j'obtiens la portion de code HTML personnalisé qui me permettra d'intégrer cette vidéo dans mes pages web.

Idéal pour préparer des séquences destinées à des formations ou à être utilisées en classe.

more...
Sophie Undreiner's curator insight, January 30, 12:58 AM

merci Alain Michel: 

Excellent service en ligne gratuit qui permet de personnaliser le code d'intégration d'une vidéo YouTube dans une page web. Il est ainsi possible :

de déterminer un instant de début et un instant de finde lecture si on n'a besoin que d'un extrait de la vidéo,de rajouter des "marqueurs" à des instants précis sur la vidéo de façon à la découper en chapitres que l'on pourra retrouver en un clic,de rajouter des annotations à des moments précis sur la vidéo,de zoomer dans la vidéo sans stopper la lecture.de lire la vidéo au ralenti.


Tout se fait très simplement en 4 étapes :

je déclare si le code d'intégration est destiné à un blog WordPress ou non,je colle l'adresse URL de la vidéo YouYube,je personnalise en choisissant éventuellement le moment de début et de fin de lecture, en posant mes marqueurs, en rajoutant des annotations, etc.j'obtiens la portion de code HTML personnalisé qui me permettra d'intégrer cette vidéo dans mes pages web.

Idéal pour préparer des séquences destinées à des formations ou à être utilisées en classe.

Chris Jaeglin's curator insight, February 1, 8:27 AM

add your insight...

Olivier Grondal's curator insight, February 5, 12:21 PM
Il permet de :déterminer un instant de début et un instant de findrajouter des "marqueurs" rajouter des annotations de zoomer dans la vidéo sans stopper la lecture.de lire la vidéo au ralenti.


Et tout se fait très simplement !

Scoop.it!

Édition en ligne de Code HTML et CSS avec JSBin

Édition en ligne de Code HTML et CSS avec JSBin | TICE, Web 2.0, logiciels libres | Scoop.it
Écrire et modifier de code HTML, CSS et JavaScript en ligne avec la possibilité de récupérer un code pour embarquer des tutoriels de programmation sur une page Web.
Alain MICHEL's insight:

Deux nouveaux éditeurs en ligne de code HTML et CSS.

Le principal outil présenté sur cette page, JSBin, est une solution Open Source.

Cet outil permet d'éditer directement en ligne et en même temps (dans la même fenêtre partagée en plusieurs parties) le code HTML, le CSS et si besoin, le code Javascript.

Accès direct : http://jsbin.com/

more...
No comment yet.
Scoop.it!

iWantHue : générer une palette de couleurs

iWantHue : générer une palette de couleurs | TICE, Web 2.0, logiciels libres | Scoop.it
Alain MICHEL's insight:

Une application en ligne extrêmement complète, réalisée par le MediaLab de Sciences-Po.

Elle permet de générer sa propre palette de couleurs assorties et d'obtenir les codes des couleurs proposées, après avoir défini une gamme de teintes.

L'avantage de cette application est qu'elle propose les couleurs de la palette obtenue sous plusieurs « formats », en particulier avec les codes RGB et les codes hexadécimaux.

Utile pour tous ceux qui développent leur site ou leur blog et qui souhaitent réfléchir à une charte graphique cohérente.

Plusieurs tutoriels vidéo sont disponibles sur le site, à consulter pour une utilisation optimale de cet outil :

http://tools.medialab.sciences-po.fr/iwanthue/tutorial.php

ainsi que des exemples de palettes de couleurs prédéfinies.

more...
Louis Levy's curator insight, December 30, 2013 6:03 AM

Très sympathique application en ligne qui permet de générer des palettes de couleurs personnelles coordonnées en faisant varier les composants. Affiche également les codes RBG.

Olivier Grondal's curator insight, January 2, 12:30 PM

Toujours utile pour tous ceux qui créent leur site et qui souhaitent des couleurs cohérentes

Scoop.it!

Le modèle tabulaire en CSS

Le modèle tabulaire en CSS | TICE, Web 2.0, logiciels libres | Scoop.it

Le modèle de construction tabulaire (HTML et CSS) compte sans aucun doute parmi les plus fascinants qui soient, après avoir été d’abord adulé puis banni vigoureusement par les intégrateurs de tous poils.

 

Alain MICHEL's insight:

Webdesign - Un tutoriel très complet avec des explications détaillées sur les nouvelles propriétés de tableaux amenées par CSS3 : comment construire une page web avec une structure tabulaire en utilisant uniquement les propriétés CSS...?

more...
No comment yet.
Scoop.it!

HTML Color Mixer

HTML Color Mixer | TICE, Web 2.0, logiciels libres | Scoop.it

Mix two colors and see the result.

Alain MICHEL's insight:

Un outil en ligne très simple pour trouver facilement et automatiquement 20 nuances de couleurs entre deux couleurs choisies.

Utile pour le webdesign et pour les créateurs de contenus web.

more...
No comment yet.
Scoop.it!

TypeWonder : prévisualiser son site internet dans une autre police

TypeWonder : prévisualiser son site internet dans une autre police | TICE, Web 2.0, logiciels libres | Scoop.it
TypeWonder, making the choice of web fonts so enjoyable!
Alain MICHEL's insight:

Un outil en ligne qui permet de tester différentes polices de caractère pour son site internet, très simplement :

 - on saisit l'adresse du site,

 - on choisit une police,

 - on observe directement le résultat dans une prévisualisation du site avec la nouvelle police,

 - si le résultat est bon, on peut obtenir directement la portion de code HTML et CSS à intégrer dans le code source pour utiliser la police voulue.

Excellent...

more...
No comment yet.
Scoop.it!

Liveweave - Éditeur HTML5, CSS3 en ligne

Liveweave - Éditeur HTML5, CSS3 en ligne | TICE, Web 2.0, logiciels libres | Scoop.it
Liveweave is a HTML5, CSS3 & JavaScript playground for web designers and developers
Alain MICHEL's insight:

Un éditeur HTML5 + CSS3 en ligne, qui gère l'autocomplétion pour les balises (particulièrement appréciable) et qui permet une prévisualistion instantanée du résultat obtenu.
Parfait pour une initiation, pour une formation...

more...
No comment yet.
Scoop.it!

Légender une image avec plusieurs effets originaux au survol - Tout en CSS

Légender une image avec plusieurs effets originaux au survol - Tout en CSS | TICE, Web 2.0, logiciels libres | Scoop.it

A tutorial on how to create some subtitle and modern caption hover effects.

Alain MICHEL's insight:

Comment légender une photo avec plusieurs effets originaux au survol de l'image.

Tout en CSS, pas de javascript, processus bien détaillé pour chaque possibilité.

more...
No comment yet.
Scoop.it!

CSS Débutant : cours et tutoriels sur les feuilles de style CSS

CSS Débutant : cours et tutoriels sur les feuilles de style CSS | TICE, Web 2.0, logiciels libres | Scoop.it

Principe des CSS : initiation, cours et tutoriels sur les Cascading Style Sheets pour les webmestres débutants dans le respect des standards.

Vous êtes débutant en réalisation de site web, vous ne savez pas par où commencer. La section premiers pas en CSS est faite pour vous. En suivant pas à pas les différents tutoriels, vous pourrez appréhender progressivement et facilement les feuilles de style et les rudiments du html.

Tous les cours disponibles sont librement reproductibles sous Licence Creative Commons BY-SA. Merci donc, en cas de reproduction partielle ou totale des pages, d'attribuer le même type de licence et de mettre un lien vers la page originale.

Alain MICHEL's insight:

Un site excellent avec des explications simples, claires, de nombreux exemples qui permettent de faire ses premiers pas avec CSS. Il y a aussi des tutoriels un peu plus développés pour ceux qui sont un peu plus aguerris. A conserver à portée de la main...!

more...
No comment yet.
Scoop.it!

147 Colors Grid - CSS Color Names

147 Colors Grid - CSS Color Names | TICE, Web 2.0, logiciels libres | Scoop.it
This is a tool to help web designers and developers learn the 147 CSS color names that are available today. The 147 Colors consist of 17 standard plus 130 more.
Alain MICHEL's insight:

Connaissez-vous les 147 couleurs qui portent un nom officiel dans CSS ?

Sur ce site qui sera utile aux développeurs et à tous ceux qui mettent en ligne leur propre site ou blog, on peut découvrir les noms de ces couleurs ; noms qui seront directement utilisables dans le code CSS en lieu et place du classique code hexadécimal ou RGB.

more...
Youcef Kébaïli's curator insight, April 10, 12:16 AM

Apprenez les noms des couleurs standards du CSS, C'est super ludique !

Scoop.it!

Color.Hailpixel - Choisir une couleur précise

Color.Hailpixel - Choisir une couleur précise | TICE, Web 2.0, logiciels libres | Scoop.it
Color picker for data driven design
Alain MICHEL's insight:

Excellent outil qui permet de sélectionner très simplement et intuitivement une couleur et d'obtenir son code hexadécimal ; idéal pour choisir une couleur pour un site web, une production graphique, etc.

L'avantage de ce site est qu'il permet de visualiser la couleur choisie sur une grande surface, puisqu'elle occupe toute la page ! Très pratique pour mieux se rendre compte.

Pour déterminer précisément une couleur :

  • déplacer la souris vers le haut pour assombrir, et inversement, vers le bas pour éclaircir la teinte,
  • déplacer la souris vers la droite ou vers la gauche pour balayer le spectre chromatique jusqu'à la teinte voulue,
  • scroller (mollette de la souris) vers le haut ou vers le bas pour modifier la saturation (vers le haut = niveaux de gris ; vers le bas = pleine couleur)

La combinaison de ces trois mouvements vous permettra d'obtenir la teinte voulue.

Un clic et la teinte choisie est "mise de côté", on peut alors en choisir une seconde, etc... La petite roue dentée permet d'obtenir en plus les valeurs RGB de la couleur.

more...
173 Sud's curator insight, February 1, 6:37 AM


A simple, gesture-based colourscheme generator.

Alain Duménil's curator insight, February 2, 12:27 AM

http://bit.ly/1dA6Y1y 

Scoop.it!

Générateur en ligne de tableau HTML

Générateur en ligne de tableau HTML | TICE, Web 2.0, logiciels libres | Scoop.it

Je me suis toujours demandé comment je pouvais élaborer des tableaux sur mes blogues sans trop me prendre la tête en terme de code html. Un truc qui en jette un peu et qui soit un peu coloré. Un outil avec lequel on puisse créer un tableau rapidement sans entrer dans du code élaboré, sans même qu’on comprenne quoique ce soit au code HTML qui est utilisé pour fabriquer un tableau...

 

Alain MICHEL's insight:

Un "générateur de tableaux" en ligne qui va vous proposer directement le code HTML correspondant à la taille et à la mise en forme du tableau que vous aurez composé.

Accès direct : http://www.tablesgenerator.com/html_tables

more...
No comment yet.
Scoop.it!

MOOC HTML5 CSS3 : mon retour d’expérience

MOOC HTML5 CSS3 : mon retour d’expérience | TICE, Web 2.0, logiciels libres | Scoop.it

J’ai participé en octobre 2013 au Mooc HTML5 et CSS3 proposé par Open classroom et je souhaitais vous en faire un retour d’expérience notamment sur son organisation et la méthode d’apprentissage que j’ai utilisé pour assimiler le contenu très riche de ce cours en ligne.
Ce Mooc avait pour objectif d’apprendre les bases du HTML5 et CSS3 pour concevoir un site web. Il s’adressait à un public débutant mais aussi à des personnes qui souhaitaient se rafraîchir la mémoire sur les balises HTML et CSS. D’une durée de 5 semaines le Mooc était animé par Mathieu Nebra et a rassemblé environ 18842 apprenants.

Alain MICHEL's insight:

Ce retour d'expérience que nous devons à Olivier Legrand (@olivierlegrand sur Twitter) est en particulier illustré par 4 remarquables cartes mentales qui reprennent l'essentiel des contenus de la formation dispensée dans ce MOOC.

À conserver bien au chaud pour ceux qui souhaitent approfondir leurs connaissances dans ce domaine.

more...
HumdeBut's curator insight, January 8, 1:31 AM

jen ai aussi suivi une partie, c'est un site fabuleux, open class room !

Scoop.it!

Apprenez à créer votre site web avec HTML5 et CSS3

Apprenez à créer votre site web avec HTML5 et CSS3 | TICE, Web 2.0, logiciels libres | Scoop.it

Vous rêvez d'apprendre à créer des sites web ?
(mais vous avez peur que ce soit compliqué car vous débutez ?)

Vous êtes au bon endroit ! Ce cours est destiné aux débutants qui ne connaissent rien à la création de sites web et qui n'attendent qu'une chose : qu'on leur explique pas à pas comment tout cela fonctionne avec des mots simples et des exemples concrets !

Nous découvrirons dans ce cours les célèbres langages HTML5 et CSS3 que l'on utilise aujourd'hui pour concevoir des sites web. Même si ces "langages" ne signifient pas encore grand chose pour vous, rassurez-vous : tout ce que vous avez besoin de savoir sera expliqué dans ce cour.

Alain MICHEL's insight:

Un excellent cours, très complet et très progressif, pour apprendre les bases de HTML et CSS, sur le site "OpenClassrooms", ex-Site du Zéro.

Le cours est disponible gratuitement dans sa version Web (accès libre) ou en PDF (inscription nécessaire). Il existe aussi en version e-Book ou livre classique (payants).

Version mise à jour le 21/02/2014

more...
No comment yet.
Scoop.it!

Mise en forme et validation d'un formulaire avec CSS3 & HTML5

Mise en forme et validation d'un formulaire avec CSS3 & HTML5 | TICE, Web 2.0, logiciels libres | Scoop.it
Let's look at how to create a functional form which validates users' data, client-side. With that done, we'll cover prettying it up using CSS, including some
Alain MICHEL's insight:

Un tutoriel très détaillé (en anglais) sur la mise en forme et la validation d'un formulaire avec les nouveaux attributs de HTML5 et CSS3.

Possibilité de télécharger les fichiers sources correspondants.

more...
No comment yet.
Scoop.it!

[TUTORIEL] - Créer et automatiser un flux RSS 2.0

[TUTORIEL] - Créer et automatiser un flux RSS 2.0 | TICE, Web 2.0, logiciels libres | Scoop.it

Tout site qui publie régulièrement des news ou articles devrait avoir un flux RSS. Concrètement, le flux RSS, fil RSS ou encore flux de syndication (nommé « RSS feed » en anglais) est un fichier XML dynamique contenant des informations mises à jour très régulièrement.

Il permet, via un lecteur de flux, d'obtenir des mises à jours de la part des sites que l'on suit sans avoir à se connecter à ceux-ci.

Pour cela, il existe de nombreux lecteurs de flux RSS .

Nous allons apprendre ici à créer un flux RSS à partir d'une base de données MySQL.

 

Alain MICHEL's insight:

Un tutoriel avec un contenu assez technique mais très détaillé, bien documenté et bien expliqué.

more...
No comment yet.
Scoop.it!

DASH : Apprendre à faire des sites Web

DASH : Apprendre à faire des sites Web | TICE, Web 2.0, logiciels libres | Scoop.it
Un site Web pour apprendre à coder en HTML, CSS et JavaScript en suivant des leçons progressives qui partent de zéro et qui mettent avant tout l'accent sur la pratique.
Alain MICHEL's insight:

Un très bon outil en ligne (en anglais) qui permet de s'initier au langage HTML et à CSS de façon extrêmement progressive.

Comme le dit l'auteur de l'article, dommage que ce genre de site n'existe pas en français...

more...
No comment yet.
Scoop.it!

Apprendre les mises en page CSS

Apprendre les mises en page CSS | TICE, Web 2.0, logiciels libres | Scoop.it

Ce site vise à vous apprendre les bases de CSS utilisées pour structurer n'importe quel site web.

Je suppose que vous savez déjà ce que sont les sélecteurs, les propriétés et les valeurs. Et vous connaissez probablement une ou deux choses sur les mise en page, même si ça peut vous donner envie de vous arracher les cheveux. Si vous voulez apprendre le HTML et le CSS depuis le début, vous devriez allez faire un tour sur ce tutoriel. Sinon, voyons si nous pouvons vous éviter de vous énerver sur votre prochain projet.

Alain MICHEL's insight:

Un cours plutôt complet, en 18 étapes, sur les bases à connaître pour réussir sa mise en page web en CSS : les positionnement, les marges, les largeurs, etc.

Pour ceux qui aiment fignoler leurs propres pages web...

more...
Philippe Villette's curator insight, August 1, 2013 9:37 AM

A première vue, bon tutoriel ...

Scoop.it!

HTML et CSS en 2 minutes - 2 minutes learning

HTML et CSS en 2 minutes - 2 minutes learning | TICE, Web 2.0, logiciels libres | Scoop.it
2minuteslearning est un site d'apprentissage permettant d'acquérir des compétences via des tutoriels vidéos de 2 minutes.
Alain MICHEL's insight:

22 tutoriels vidéos de 2 minutes chacun, très progressifs, pour débuter avec HTML et CSS.

more...
No comment yet.