TICE, Web 2.0, logiciels libres
249.3K views | +5 today
Follow
TICE, Web 2.0, logiciels libres
Les infos sur l'actualité des TICE et des usages du numérique dans l'enseignement. https://twitter.com/alainmi11
Curated by Alain MICHEL
Your new post is loading...
Your new post is loading...
Scoop.it!

Codes HTML des symboles et caractères spéciaux

Codes HTML des symboles et caractères spéciaux | TICE, Web 2.0, logiciels libres | Scoop.it
Easily find HTML symbols, entities, characters and codes with ASCII, HEX, CSS and Unicode values for HTML arrow, ASCII arrow, and more in grid or table format.
Alain MICHEL's insight:

Ce site propose et permet de retrouver tous les codes HTML de tous les caractères spéciaux, signes et symboles possibles et imaginables.

Ils sont regroupés par "catégories" accessibles via la barre en haut de l'écran : les flèches, les symboles de devises, les lettres et caractères accentués, les symboles mathématiques, les nombres, les signes de ponctuation et les symboles divers.

Pour chaque signe choisi, le site nous affiche 4 codes correspondants :

  • le code "Unicode"
  • le code hexadécimal
  • le code HTML
  • l'entité de caractère HTML quand elle existe

Indispensable pour afficher correctement sur ses pages web tous les caractères spéciaux dont on peut avoir besoin, en particulier, par exemple, pour les professeurs de mathématiques, gros consommateurs de symboles divers et autres lettres grecques !

À connaître et à garder dans ses favoris.

NB : un autre site équivalent : https://dev.w3.org/html5/html-author/charref 

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

Le HTML par lui-même : les principes de base d'internet et du HTML

Le HTML par lui-même : les principes de base d'internet et du HTML | TICE, Web 2.0, logiciels libres | Scoop.it

Dans le premier épisode des aventures du HTML, découvrez les principes de base du fonctionnement d'Internet et du web.
Le second épisode des aventures du HTML, permettra de vous initier aux bases de ce langage et d'apprendre à réaliser votre propre site web.

Alain MICHEL's insight:

Un dossier complet, proposé par France TV Éducation, destiné d'après le site aux élèves de collège dans le cadre de l'Éducation aux médias, mais qui sera très utile à tous ceux qui souhaitent découvrir et apprendre les bases de l'organisation de l'internet et de son fonctionnement (dans un premier épisode de 5 pages) ainsi que les rudiments du langage HTML pour construire ses propres pages (dans un second épisode de 5 autres pages).
Les textes sont simples et très clairs, très progressifs, c'est vraiment un EXCELLENT document, à connaître, à faire connaître, et à utiliser !

La seconde partie du dossier est ici :

http://education.francetv.fr/education-aux-medias/sixieme/dossier/le-html-par-lui-meme-2-2

more...
savignon corinne's curator insight, March 15, 8:10 AM

Un dossier complet, proposé par France TV Éducation, destiné d'après le site aux élèves de collège dans le cadre de l'Éducation aux médias, mais qui sera très utile à tous ceux qui souhaitent découvrir et apprendre les bases de l'organisation de l'internet et de son fonctionnement (dans un premier épisode de 5 pages) ainsi que les rudiments du langage HTML pour construire ses propres pages (dans un second épisode de 5 autres pages).
Les textes sont simples et très clairs, très progressifs, c'est vraiment un EXCELLENT document, à connaître, à faire connaître, et à utiliser !

La seconde partie du dossier est ici :

http://education.francetv.fr/education-aux-medias/sixieme/dossier/le-html-par-lui-meme-2-2

CDI lycée Jean Renoir- Bondy.'s curator insight, March 29, 1:11 PM

Un dossier complet, proposé par France TV Éducation, destiné d'après le site aux élèves de collège dans le cadre de l'Éducation aux médias, mais qui sera très utile à tous ceux qui souhaitent découvrir et apprendre les bases de l'organisation de l'internet et de son fonctionnement (dans un premier épisode de 5 pages) ainsi que les rudiments du langage HTML pour construire ses propres pages (dans un second épisode de 5 autres pages).
Les textes sont simples et très clairs, très progressifs, c'est vraiment un EXCELLENT document, à connaître, à faire connaître, et à utiliser !

La seconde partie du dossier est ici :

http://education.francetv.fr/education-aux-medias/sixieme/dossier/le-html-par-lui-meme-2-2

CDI POINCARE's curator insight, April 5, 7:32 AM

Un dossier complet, proposé par France TV Éducation, destiné d'après le site aux élèves de collège dans le cadre de l'Éducation aux médias, mais qui sera très utile à tous ceux qui souhaitent découvrir et apprendre les bases de l'organisation de l'internet et de son fonctionnement (dans un premier épisode de 5 pages) ainsi que les rudiments du langage HTML pour construire ses propres pages (dans un second épisode de 5 autres pages).
Les textes sont simples et très clairs, très progressifs, c'est vraiment un EXCELLENT document, à connaître, à faire connaître, et à utiliser !

La seconde partie du dossier est ici :

http://education.francetv.fr/education-aux-medias/sixieme/dossier/le-html-par-lui-meme-2-2

Scoop.it!

Paletton - Choisir les couleurs de sa charte graphique

Paletton - Choisir les couleurs de sa charte graphique | TICE, Web 2.0, logiciels libres | Scoop.it
In love with colors, since 2002. A designer tool for creating color combinations that work together well. Formerly known as Color Scheme Designer. Use the color wheel to create great color palettes.
Alain MICHEL's insight:

Paletton est un outil en ligne qui permet de choisir les couleurs pour votre site internet ou pour votre production graphique en définissant des couleurs assorties pour une charte graphique, des couleurs complémentaires, des couleurs adaptées à des handicaps visuels particuliers pour une meilleure accessibilité.

Différents réglages et choix sont accessibles au moyen des 5 onglets disposés au bas de la fenêtre. Il est ainsi possible de définir soi-même précisément sa couleur de base (onglet "Colors"), ou alors de choisir à partir de cette couleur parmi des palettes prédéfinies (onglet "Presets").

Toutes les infos techniques sont données à tout moment sur chaque couleur choisie (code hexadécimal, code RVB, valeur de luminosité, etc...) en cliquant sur une couleur dans la partie droite de la fenêtre.

L'outil propose même de prévisualiser à titre d'exemple votre choix de couleurs sur un site fictif (onglet "Exemples").

Enfin, il est possible d'exporter toutes les valeurs des couleurs choisies au format HTML, ou bien CSS, ou encore texte brut, entre autres (onglet "Tables/Export").
Excellent outil très complet et en même temps simple d'emploi.

À connaître.

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

ColorHexa : choisir et assortir ses couleurs

ColorHexa : choisir et assortir ses couleurs | TICE, Web 2.0, logiciels libres | Scoop.it

ColorHexa.com is a free color tool providing information about any color. Just type any color values in the search field and ColorHexa will offer a detailed description and automatically convert it to its equivalent value in Hexadecimal, Binary, RGB, CMYK, [...] ColorHexa will also generate matching color schemes such as complementary, split complementary, analogous, triadic, tetradic and monochromatic colors. [...]. It is also possible to blend colors together or create a gradient between them (see examples below).


Alain MICHEL's insight:

Excellent et très simple d'utilisation, ce site permet de choisir aisément une couleur et d'obtenir une palette de couleurs assorties, tous les codes hexadécimaux, RGB, CMJN, (et plusieurs autres...), différentes nuances de cette couleur, des teintes sombres, des teintes claires, des tons différents et des exemples d'utilisation en couleur d'arrière plan ou en couleur de police. Enfin, on peut aussi voir comment sera perçue cette couleur par des personnes atteintes de différents troubles de la vision.
Idéal pour choisir des couleurs pour préparer une charte graphique, pour ses pages web, tout en prenant garde à l'accessibilité du contenu.
À garder sous le coude...

more...
au fil du web's comment, September 29, 2015 1:54 PM
Un peu comme le site Adobe Kuler
Chris Simon's curator insight, October 2, 2015 5:47 AM

Un logiciel gratuit. Excellent pour faire vos couverture en toute harmonie. Je le mettrai aussi dans les tutos du Mag.

Scoop.it!

ATOM : un superbe éditeur de texte entièrement personnalisable et adaptable

ATOM : un superbe éditeur de texte entièrement personnalisable et adaptable | TICE, Web 2.0, logiciels libres | Scoop.it
At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it.
Alain MICHEL's insight:

ATOM 1.0  est la nouvelle et première version stable d'un éditeur de texte, logiciel libre, multi-plateforme (Windows, MacOS et Linux), dont les fonctionnalités déjà multiples dans la version de base peuvent être augmentées presque à l'infini puisque cet outil est basé sur un système de "packages", c'est à dire de modules optionnels qu'il est possible d'installer directement depuis son interface. (un peu à la façon des extensions de Firefox, pour ceux qui y sont habitués).

Parmi les fonctions de base, on peut citer la prise en charge bien évidemment de l’auto-complétion du code sur tous les langages (incontournable) et la possibilité de scinder sa fenêtre en 2 ou plusieurs panneaux pour travailler simultanément en différents endroits d'un même fichier.

Parmi les packages additionnels, on ne pourra pas se passer d'ajouter un sélecteur de couleur (color picker) extrêmement utile ou du module "minimap" qui permet de visualiser en permanence la totalité du code de notre document et d'y naviguer très rapidement. Pratique aussi le module "markdown-preview" qui permet d'avoir un panneau de prévisualisation du résultat du code sur lequel on travaille.

Bref... impossible de tout décrire ici, cet éditeur de texte est vraiment excellent, à découvrir.

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:

Ce site est construit comme un cours plutôt complet, en 19 étapes, sur les bases à connaître pour réussir sa mise en page web en CSS : les positionnement, les marges, les largeurs, etc.

Ceux qui aiment fignoler leurs propres pages web trouveront matière à perfectionner leurs connaissances...

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

Paletton - The Color Scheme Designer

Paletton - The Color Scheme Designer | TICE, Web 2.0, logiciels libres | Scoop.it
A designer tool for creating color combinations that work together well. Formerly known as Color Scheme Designer. Use the color wheel to create great color palettes.
Alain MICHEL's insight:

Choisissez les couleurs pour votre site internet ou pour votre production graphique avec cet outil en ligne. Permet de définir des couleurs assorties pour une charte graphique, des couleurs complémentaires, des couleurs adaptées à des handicaps visuels particuliers pour une meilleure accessibilité. Il est possible de définir soi-même précisément sa couleur de base (onglet "Colors"), ou alors de choisir à partir de cette couleur parmi des palettes prédéfinies (onglet "Presets").

Toutes les infos techniques sont données à tout moment sur chaque couleur choisie (code hexadécimal, code RVB, valeur de luminosité, etc...).

L'outil propose même de prévisualiser à titre d'exemple votre choix de couleurs sur un site fictif (onglet "Exemples").

Enfin, il est possible d'exporter toutes les valeurs des couleurs choisies au format HTML, ou bien CSS, ou encore texte brut, entre autres (onglet "Tables/Export").
Excellent outil très complet et en même temps simple d'emploi.

À connaître.

more...
Frédérick Barbier's curator insight, May 13, 2015 8:10 AM

Choisissez les couleurs pour votre site internet ou pour votre production graphique avec cet outil en ligne. Permet dedéfinir des couleurs assorties pour une charte graphique, des couleurs complémentaires, des couleurs adaptées à des handicaps visuels particuliers pour une meilleure accessibilité. Il est possible de définir soi-même précisément sa couleur de base (onglet "Colors"), ou alors de choisir à partir de cette couleur parmi des palettes prédéfinies (onglet "Presets").

Toutes les infos techniques sont données à tout moment sur chaque couleur choisie (code hexadécimal, code RVB, valeur de luminosité, etc...).

L'outil propose même de prévisualiser à titre d'exemple votre choix de couleurs sur un site fictif (onglet "Exemples").

Enfin, il est possible d'exporter toutes les valeurs des couleurs choisies au format HTML, ou bien CSS, ou encore texte brut, entre autres (onglet "Tables/Export").
Excellent outil très complet et en même temps simple d'emploi.

À connaître.

Scoop.it!

HTML5, CSS3, JavaScript, etc. Tous les tutoriels de AlsaCréations

HTML5, CSS3, JavaScript, etc. Tous les tutoriels de AlsaCréations | TICE, Web 2.0, logiciels libres | Scoop.it
Apprendre la création web et les CSS grâce aux tutoriels
Alain MICHEL's insight:

Tous les tutoriels disponibles sur l'excellent site AlsaCreations, tutoriels consacrés aux langages de développement web : HTML, CSS, Javascript, ainsi qu'aux notions d'accessibilité et de webdesign.
Une véritable mine...

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

Les formes et l'habillage du contenu en CSS

Les formes et l'habillage du contenu en CSS | TICE, Web 2.0, logiciels libres | Scoop.it
Using CSS Shapes we can create experiences that we have never been able to create on the web before.
Alain MICHEL's insight:

Un article un peu technique mais qui présente relativement simplement les nouvelles possibilités de mise en forme des contenus sur une page web, grâce à "l'habillage" du texte autour de formes personnalisables, tout ça, uniquement en utilisant CSS.

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

Notepad++ : un excellent éditeur de texte

Notepad++ : un 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.

Idéal pour les développeurs ou pour tous ceux qui modifient occasionnellement quelques portions de code source pour les pages de leur blog...

Il remplacera très avantageusement le triste et indigent "Notepad" (tout court...) présent par défaut dans Windows.

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

EnjoyCSS : générateur de CSS3 en ligne

EnjoyCSS : générateur de CSS3 en ligne | TICE, Web 2.0, logiciels libres | Scoop.it
EnjoyCSS is an advanced CSS3 generator that saves your time. Its handy and simple UI allows you to adjust rich graphical styles quickly and without coding.
Alain MICHEL's insight:

Un excellent générateur de code CSS3 en ligne, très simple, qui permettra même à des personnes sans aucune connaissance de récupérer le code nécessaire à la mise en forme de ses pages web.

Une interface simple permet de choisir précisément ses propres styles. Quand la prévisualisation du résultat vous satisfait, il n'y a plus qu'à récupérer le code source en CSS3 pour l'utiliser dans vos pages.

À tester.

more...
No comment yet.
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 propriétés d'affichage en tableaux amenées par CSS3 : comment construire une page web avec une structure tabulaire en utilisant uniquement les propriétés CSS...?

Excellent... Permet de varier à loisir les positionnements et les alignements de contenus.

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

Comment tester votre site "responsive" ?

Comment tester votre site "responsive" ? | TICE, Web 2.0, logiciels libres | Scoop.it

Savoir si un site développé se comporte bien en responsive est devenu une nécessité de nos jours. Il est donc important de connaître tous les moyens mis à notre disposition pour réaliser cette étude.

Deux lignes de conduites (probablement complémentaires) sont à prendre en compte :

  • soit on teste sur des outils simulant le comportement des appareils,
  • soit on teste directement sur les supports que l'on souhaite prendre en charge.
Alain MICHEL's insight:

Cet article propose une série d'outils nécessaires aux webmasters pour tester le comportement d'un site qui a été développé en "responsive webdesign", c'est à dire, pour les non-initiés, qui a été développé pour que son aspect, son design, sa mise en page s'adaptent en permanence et de façon automatique à n'importe quelle largeur d'écran qui affichera le site.

Il existe évidemment la solution qui consiste à afficher réellement le site sur quelques tablettes et quelques téléphones mobiles de différentes dimensions, mais on n'a pas toujours ce matériel sous la main...!

On peut sinon utiliser les outils proposés par l'auteur de cet article : soit des extensions de navigateur, soit des outils en ligne.

more...
C-Marketing's curator insight, August 5, 2014 3:57 AM

Votre site est-il lisible sur tous les écrans ? 

Scoop.it!

Comment réaliser un livre numérique au format EPUB ? Guide complet

Comment réaliser un livre numérique au format EPUB ? Guide complet | TICE, Web 2.0, logiciels libres | Scoop.it

Il s'agit ici, de réaliser un texte au format HTML5 et CSS3 en utilisant les principales balises de ce langage, puis de le transformer en livre électronique au format EPUB3 avec Calibre pour, enfin, le diffuser via une bibliothèque en ligne ou par téléchargement.
Le format HTML étant à la base du format EPUB, plus encore dans sa version 3, ce guide vise à maîtriser au mieux la mise en forme et pourra être réutilisé, par exemple avec un logiciel de traitement de texte.

Alain MICHEL's insight:

Un guide archi-complet, un travail énorme pour présenter de façon exhaustive tous les aspects à connaître et à prendre en compte pour une telle réalisation.
Le guide est disponible aussi au format PDF, téléchargeable.
à connaître...

Sommaire du guide Comment réaliser un livre au format EPUB ?

  1. La lecture numérique
  2. Structurer
  3. Le texte
  4. Les images, la vidéo, l’audio
  5. Le style
  6. La validation du document
  7. La conversion avec Calibre
  8. Lire, publier le livre
  9. Réaliser un EPUB manuellement, un exemple commenté
  10. Sitographie
more...
veroni's curator insight, July 21, 3:25 AM
Un excellent guide, et en fait une formation complète sur le livre numérique et la lecture numérique : les bases, mais aussi le détail du codage html appliqué à la lecture numérique avec quelques liens pertinents et essentiels à chaque chapitre. A recommander !
Scoop.it!

ColorFavs : créer une palette de couleurs à partir d'une image

ColorFavs : créer une palette de couleurs à partir d'une image | TICE, Web 2.0, logiciels libres | Scoop.it

Web designers, graphic designers, illustrators, icon artists, typographers, logo designers, and other creatives need just the right colors for their projects. With the right palette, your project could be beautiful. Without it, it will always feel like it's missing something.

ColorFavs makes it easy for you to create and discover palettes and colors for all of your design needs.

Alain MICHEL's insight:

Ce site permet d'extraire une palette de couleurs depuis une image qu'on  peut lui soumettre par simple glisser-déposer (icône "From image"), ou bien depuis une URL qu'il suffit de copier / coller (icône "From URL") s'il s'agit d'une image hébergée en ligne..

Une palette de 5 couleurs est alors automatiquement générée.

On peut également créer une palette de couleurs  de façon manuelle (icone "Random") en choisissant le nombre de couleurs, la teinte et la luminosité.

Il est aussi possible d'explorer les palettes existantes.

Bien sûr, toutes les infos techniques sur les couleurs choisies sont automatiquement affichées : code hexadécimal, RGB, CMJN, etc...

➜ Un autre outil du même genre, déjà présenté ici :

Color Explorer http://sco.lt/96FYED

more...
marieangemat's curator insight, January 10, 8:12 AM
Alain MICHEL's insight:

Ce site permet d'extraire une palette de couleurs depuis une image qu'on  peut lui soumettre par simple glisser-déposer (icône "From image"), ou bien depuis une URL qu'il suffit de copier / coller (icône "From URL") s'il s'agit d'une image hébergée en ligne..

Une palette de 5 couleurs est alors automatiquement générée.

On peut également créer une palette de couleurs  de façon manuelle (icone "Random") en choisissant le nombre de couleurs, la teinte et la luminosité.

Il est aussi possible d'explorer les palettes existantes.

Bien sûr, toutes les infos techniques sur les couleurs choisies sont automatiquement affichées : code hexadécimal, RGB, CMJN, etc...

➜ Un autre outil du même genre, déjà présenté ici :

Color Explorer http://sco.lt/96FYED

Pomaret's curator insight, April 1, 3:42 AM

Ce site permet d'extraire une palette de couleurs depuis une image qu'on  peut lui soumettre par simple glisser-déposer (icône "From image"), ou bien depuis une URL qu'il suffit de copier / coller (icône "From URL") s'il s'agit d'une image hébergée en ligne..

Une palette de 5 couleurs est alors automatiquement générée.

On peut également créer une palette de couleurs  de façon manuelle (icone "Random") en choisissant le nombre de couleurs, la teinte et la luminosité.

Il est aussi possible d'explorer les palettes existantes.

Bien sûr, toutes les infos techniques sur les couleurs choisies sont automatiquement affichées : code hexadécimal, RGB, CMJN, etc...

➜ Un autre outil du même genre, déjà présenté ici :

Color Explorer http://sco.lt/96FYED

Scoop.it!

Le HTML par lui-même : découvrez les principes de base d'internet et du HTML

Le HTML par lui-même : découvrez les principes de base d'internet et du HTML | TICE, Web 2.0, logiciels libres | Scoop.it

Dans le premier épisode des aventures du HTML, découvrez les principes de base du fonctionnement d'Internet et du web.
Le second épisode des aventures du HTML, permettra de vous initier aux bases de ce langage et d'apprendre à réaliser votre propre site web.


Alain MICHEL's insight:

Un dossier complet, proposé par France TV Éducation, destiné d'après le site aux "plus jeunes" mais qui sera très utile à tous ceux qui souhaitent découvrir et apprendre les bases de l'organisation de l'internet et de son fonctionnement (dans un premier épisode de 5 pages) ainsi que les rudiments du langage HTML pour construire ses propres pages (dans un second épisode de 5 autres pages).
Les textes sont simples et très clairs, très progressifs, c'est vraiment un EXCELLENT document, à connaître, à faire connaître, et éventuellement à utiliser pour tous ceux qui sont amenés à faire des cours ou des formations sur ce thème.

La seconde partie du dossier est ici :

http://education.francetv.fr/education-aux-medias/sixieme/dossier/le-html-par-lui-meme-2-2

À conserver dans ses favoris...

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

CSS Reference | Une référence complète de toutes les propriétés CSS

CSS Reference | Une référence complète de toutes les propriétés CSS | TICE, Web 2.0, logiciels libres | Scoop.it
An extensive CSS reference with all the important CSS properties and info to learn CSS from the basics
Alain MICHEL's insight:

Une référence archi-complète (en anglais) de toutes les propriétés CSS qui sont décrites, commentées, expliquées, décortiquées et illustrées par des captures d'écran, des exemples et même par une fenêtre de démo éditable pour faire ses propres essais et modifications.

Chaque propriété est expliquée avec sa syntaxe officielle, les valeurs qu'elle peut prendre et des exemples d'utilisation.

Un travail vraiment énorme que l'on doit à Sara Soueidan qui est... une référence en la matière !  ;+)

À connaître et à garder sous le coude.

EXCELLENT.

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, en cliquant sur le bouton "Get code".

Excellent...

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 subtle and modern caption hover effects.
Alain MICHEL's insight:

Comment légender une photo avec plusieurs effets originaux au survol de l'image. Le code source est décortiqué et bien expliqué sur cette page, on peut télécharger l'ensemble et il faut cliquer sur le bouton "View demo" pour juger du résultat des 7 effets différents proposés par l'auteur.

Tout est fait en CSS, pas de Javascript.

J'ai une préférence pour l'effet n° 3 parmi ceux qui sont proposés...

more...
euroagls's curator insight, May 16, 2015 12:47 PM

programmation CSS

Scoop.it!

Codes couleurs HTML : tous les outils sur un seul site

Codes couleurs HTML : tous les outils sur un seul site | TICE, Web 2.0, logiciels libres | Scoop.it
Get HTML color codes for your website. Color chart, color picker and color palettes.
Alain MICHEL's insight:

Un site entier avec des outils et des explications simples sur les codes couleurs en HTML :

  • outils pour choisir des couleurs,
  • comment utiliser les codes hexadécimaux des couleurs choisies,
  • outil pour extraire une palette de couleurs depuis une image,
  • etc.

Pour ceux qui commencent à se pencher sur l'édition de leurs contenus en ligne, qui se lancent dans la création de pages web, pour les débutants, ce site rassemble des outils essentiels qui feront gagner du temps...

À garder sous le coude.

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...
Après l'import de son image à analyser, le site offre d'autres outils sur chacun des onglets présents en haut de la page :

  • Color Picker : choisir très précisément une couleur et obtenir les codes RGB et hexadécimaux correspondants,
  • Color Libraries : explorez les bibliothèques de couleurs déjà établies : couleurs pour le web, couleurs nommées en CSS, etc.
  • Color matching : outil pour trouver des couleurs assorties, complémentaires, des nuances, etc.

Tant que j'y suis, un autre site, similaire :
http://www.colorhunter.com/

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

HTML et CSS en 2 minutes : tutoriels vidéo

HTML et CSS en 2 minutes : tutoriels vidéo | 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 connaître les bases et bien débuter avec HTML et CSS.

Ces tutoriels sont proposés par le site "2 minutes learning" qui a fait sa spécialité de ces courtes vidéos thématiques.

Explorez le site pour découvrir les autres thèmes abordés...

À connaître...

more...
Vincent Lahondère's curator insight, December 20, 2014 5:00 PM

Très utile lorsque vous souhaitez par exemple créer un site internet

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...
Olivier JADZINSKI 's curator insight, November 8, 2014 12:57 PM

"Ah oui mais Monsieur, je veux du bleu qui soit moins bleu"..
voilà la réponse ! 

Scoop.it!

JSBin : Édition en ligne de Code HTML et CSS

JSBin : Édition en ligne de Code HTML et CSS | 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!

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 CSS3 ! | Difficulty: Beginner; Length: Short

Alain MICHEL's insight:

Un tutoriel très détaillé (en anglais mais facile à suivre) 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. (colonne de droite ; "download attachments")

more...
No comment yet.