Informatique . Blogs

Conception / Informatique / Blog

" Sites à visiter "

01) Wordle : I c i

Faire un montage de présentation

A voir ...

02 ) Bancreator : I c i

Créer gratuitement
- des gifs animés,
- des bannières web
- des images animées

03 ) Dafont : I c i

& Fontriver : I c i

Ajouter selon son choix des polices
et ainsi agrémenter sa présentation,
ses créations ...

4 ) Weecast : I c i

et Ici
Dans les utilitaires, comprendre
certaines expressions informatiques,
un grand nombre de logiciels
on y trouve des vidéos et des tuto.

5 ) Developpez : I c i

Un site pour les passionnés d'informatique

6 ) Toutimages : I c i et I c i

conception des blogs

7 ) Grsites : I c i

De nombreuses textures pour les blogs
des polices
des fonds sonores ...

8 ) Drawter : I c i

En cherchant a répondre à mes intrrogations,
j'ai trouvé ce service.

Drawter permet

de génèrer les codes de votre site.

On place les zones voulu et on obtient

les codes HTML et CSS que l'on souhaite.

Cela permet de dépanner lorsque
l'on a du mal avec les codes sources ...

9 ) Blog Tuto ; un clic sur l' image
pour le visiter

10 ) : Cooltext : I c i

Générateur de graphiques,

de logos ...

11 ) : Touches clavier nécessaires

pour obtenir les écris suivants

Alt + 0223 = ß
Alt + 2 ☻ (un smiley)
Alt + 3 = ♥ (coeur au fond rempli)
Alt + 5 = ♣
Alt + 6 = ♠
Alt + 7 = •
Alt + 9 = ○
Alt + 10 = ◙
Alt + 11 = ♂
Alt + 12 = ♀
Alt + 13 = ♪
Alt + 15 =☼ (soleil)
Alt + 14 =♫ (note de musique double)
Alt + 18 = ↕
Alt + 19 = ‼
Alt + 20 = ¶
Alt + 21 = §
Alt + 24 = ↑
Alt + 25 = ↓
Alt + 26 = →
Alt + 27 = ←
Alt + 28 = ∟
Alt + 29 = ↔
Alt + 30 = ▲
Alt + 31 = ▼
alt + 145 = æ
Alt + 157= Ø
Alt + 155= ø
Alt + 168 = ¿
Alt + 169 = ®
Alt + 170 = ¬
Alt + 174 = «
Alt + 175 = »
Alt + 177 = ▒
Alt + 178 = ▓
Alt + 180 = ┤
Alt + 184 = ©
Alt + 185 = ╣
Alt + 186 = ║
Alt + 187 = ╗
Alt + 188 = ╝
Alt + 189 = ¢
Alt + 190 = ¥
Alt + 191 = ┐
Alt + 192 = └
Alt + 193 = ┴
Alt + 194 = ┬
Alt + 195 = ├
Alt + 196 = ─
Alt + 197 = ┼
Alt + 200 = ╚
Alt + 201 = ╔
Alt + 202 = ╩
Alt + 203 = ╦
Alt + 204 = ╠
Alt + 205 = ═
Alt + 206 = ╬
Alt + 208 = ð
Alt + 209 = Ð
Alt + 213 = ı
Alt + 217 = ┘
Alt + 218 = ┌
Alt + 219 = █
Alt + 220 = ▄
Alt + 225 = ß
Alt + 231 = þ
Alt + 232 = Þ
Alt + 238 = ¯
Alt + 241 = ±
Alt + 242 = ‗
Alt + 246 = ÷
Alt + 250 = · (différent du point normal .)
Alt + 251 = ¹ (exposant 1)
Alt + 252 = ³ (exposant 3)
Alt + 253 = ² (exposant 2)
Alt + 254 = ■
Alt + 433 ▒
Alt + 434 ▓
Alt + 499 = Ÿ
alt +754 = ‗
Alt + 785 = ◄
Alt + 925 = Ø
alt + 999 = þ
Alt + 3331 = ♥
alt + 12151214 = «
alt + 12151215 = »

❥

12 ) Abode atelier vidéo

explications et vidéos sur les utilisations

d' Abode et avec divers applications

- textes animés

- animation de calques

- création de 3 D

- ...

I c i

css

Quelques explications

Quelques bases

CSS, ca signifie Cascadinf StyleSheet.

Cascading, veut dire que les éléments de structure

appellent les éléments de design les uns après les autres

Les lignes CSS sont lues dans l'ordre,

la dernière ligne ayant toujours le dessus sur celles qui sont au dessus.

Sur au moins 5 parties qui se définissent ainsi :

à savoir

- A utiliser dans configurer

- Pour une structure à 3 colonnes

(les modules à placer au mieux

dans les 2 colonnes de modules)

- Design : en choisir un qui est mdifiable,

puis aller dans disign CSS. Cocher la fonction spécifique CSS

pour modifier soi-même selon son propre design,

qui remplacera celui de base.

- cocher "modifier l'héritage" et décocher

les 4 cases d'héritage qui définissaient les

éléments modifiés et redéfinis.

*************************
* Structure: 3 colonnes *
*************************

Ces lignes permettent de définir l'aspect global du blog

(positions, fond et bordures des colonnes)

body {margin: 2px; background: #CCC;} /* fond general du blog */

#global {border: 1px solid black; background: #DDD; margin: auto; width: 94%; } /* Pour centrer le blog */

#top {border: 0px; margin: 5px; } /* Entete */

#cl_1_0 {border: 1px solid #A17272; background: #D2BDBD; width: 20%; position: float; float: left; margin: 0px 5px; padding: 3px;} /* Colonne n 1 */

#cl_1_1 {border: 1px solid #A17272; background: #D2BDBD; width: 54%; position: float; float: left; margin: 0px 2px; padding: 5px;} /* Colonne articles */

#cl_1_2 {border: 1px solid #A17272; background: #D2BDBD; width: 20%; position: float; float: right; margin: 0px 5px; padding: 3px;} /* Colonne n 3 */

#footer {margin: 5px; padding: 3px;} /* pied de page */

********************************
* Styles pratiques, à connaitre *
********************************

Ces lignes permettent de modifier les styles qui sont souvent utilisés :

titres, liens, images, formulaires...

h2 {display: block; text-align: center;} /* Alignement de tous les titres */

a img {border: 0px;} /* supprimer les bordures sur les images

qui servent de lien */

a:visited, a {color: #fff;} /* liens (déjà visites ou non) */

input, textarea {font-size: 90%; border: 1px solid #ffffff; background: #A17272; color: white; padding: 0px 3px;} /* les champs des formulaires */

form {margin: 0px; padding: 0px;} /* espaces autour des formulaires */

blockquote {border: 1px solid black; background: #FFF; padding: 5px;} /*

encart de tabulation, pour presenter le code */

***********
* Modules *
***********

Ces lignes permettent de relooker les modules.

D'abord de façon générale, puis de façon détaillée pour certains.

.box-titre h2 {font-size: 15px; color: #933; text-decoration: none; margin: 0px; margin-top: 5px;} /* Titres des modules */

.box-content {font-size: 100%; border-bottom: 3px solid #A17272; padding-bottom: 5px;} /* Contenu des modules */

.box-footer {display: none;} /* Bas des modules */

.recherche {text-align: center;} /* module recherche */

.newsletter {text-align: center;} /* module newsletter */

************
* Articles *
************

Ces lignes permettent de présenter les articles correctement

(y compris une ligne pour les commentaires).

.article {text-align: justify;} /* Contenu des articles */

.afterArticle a {padding-left: 15px; } /* lien commentaires */

.afterArticle {text-align: right; padding-bottom: 5px; margin-top: 10px; margin-bottom: 25px; border-top: 1px solid #A17272;} /* lignes apres les articles (publie par + commentaires */

.commentMessage, .commentOption {background: orange; padding: 3px;} /*

Le commentaire et son auteur */

.date {font-size: 90%; text-align: right;} /* format et position de la date */

*************************
* Liens du pied de page *
*************************

Ces lignes montrent que l’on peut vraiment modifier l'aspect de tout.

Pas très utile dans ce cas, sauf que les liens auraient été blanc sur fond clair: illisible.

#footer a {color: black; text-decoration: none;} /* lien dans le pied de page */

#footer a:hover {text-decoration: underline;} /* liens survoles */

---

...Quelques liens sur le CSS...

13 ) CSS3 CSS Transforms

Créez des effets sympathiques avec CSS 3

en quelques étapes simples.

CSS3 CSS Transforms

Faites pivoter, redimensionnez, inclinez

ou par ailleurs transformez les éléments HTML et CSS 3.

Découvrez ce site (compatible avec Opera 10.5,

Firefox 3.5 et Safari 4 et plus).

Vous pouvez choisir entre une animation 2d ou 3d.

L’interface est graphique et simple d’utilisation.

Quand vous obtenez le résultat voulu il ne vous reste qu’a copier

et coller le code fourni par le site dans votre feuille de style.

Vous avez aussi d’autres outils très utiles comme Shadows,

CSS Text Stroke et encore Gradients. Visitez ce site

CSS3 Please.com

Modifiez les valeurs et ayez un aperçu directement avec ce site .

Plus de prise de difficultée, tout est fait automatiquement pour vous.

Vous pouvez copier tout ou une partie des codes

et les coller dans votre propre feuille de style chaque fois

que vous le souhaitez.

Et vous qui pensiez qu’il fallait des super connaissances

en CSS pour y arriver …

Pour visiter le site, cliquez ici.

Border radius.com

Voici un site qui vous fera certainement gagner du temps

si vous cherchez à faire des conteneurs avec les coins arrondis.

Interface simple, épurée, classe…

Entrez les valeurs que vous souhaitez dans les 4 cases se trouvant

à côtés des coins et récupérez ensuite le code

à l’intérieur du conteneur. cliquez ici.

14 ) Css3 marker

Un outil qui pourra aider, un générateur permet de créer des éléments

On peut créer des ombrages,

des animations

ou encore des textes avec des polices d’écritures spéciales,

le tout en utilisant un seul outil.

Le CSS n’aura ainsi plus de secret et peut être utilisé pour un blog.

à ce lien ici

15) Templates

différentes présentations

à télécharger

à ce lien ici

16) Horloges

De jolies horloges pour vos blogs

à ce lien ici

17) Générateur de couleurs

à ce lien ici

18) sites et blogs interessants

avec leurs astuces ...

pour les blogs

et

et

et

et

et

et

19) Pour créer des fonds de blog

- générateur ici

et

- ici

20) I-services

Modules ou services clé en mains

ou services gratuits pour les blogs

- ici

21) Link with in

ajouter des images à la page principale

et un lien vers chacun des articles

lien aux images défilantes ...

ce principe se voit sur de nombreux sites ...

culinaires par exemple, ou d' achats...

(widjet gratuit)

à ce lien ici

22) de jolis thèmes de blog

à ce lien ici

23) créer un web site ou autre

en flash et gratuit

à ce lien ici

24) Presse citron

Un site très interessant pour ceux qui aiment

le design des blogs, la création ...

à ce lien ici

25) Dynamic drive

des codes htlm, javascript...

pour animer les blogs

à ce lien ici

26) Dico info

Des explications simples

concernant les mots sur le net

et informatique

à ce lien ici

27) Modification des blogs

des astuces, des codes à voir

un site très interessant pour Blogger ou autre

à ce lien ici

28) Trucs et astuces

pour Blogger

et autres

à ce lien ici

29) animations

créer une image animée : ici

30) Générateurs

- de barre flottante : ici

- de liste déroulante : ici

- de CSS des titres : ici

- de liens texte et image : ici

- de texte défilant : ici

31) Savoir tout faire

un site interessant : ici

32) Comment faire un gif ...

Tutoriel

33) Comment faire un gif animé ...

Tutoriel

site gicker.com : ici

34) informatique / divers

site à consulter :

- "Partage du savoir /informatique" : ici

Graphisme

vocabulaire nécessaire pour faire du Graphisme.

- Bannière : Création que se met en guise de signature .

les dimensions sont souvent 450*150.

-

- Avatar : C'est une petite image qui permet d'identifier.

la taille varie mais est généralement de 150*150

-

- Kit : C'est une bannière et un avatar qui s'accode ensemble

(généralement, l'avatar est une petite partie de la bannière)

-

- Icon : Petit avatar n'ayant ni typo ni cadre,

c'est un travail de coloring.

la taille est de 100*100

-

- Header (En-tête) : Création assez grande se trouvant

au haut d'un forum,

d'une dicution,

d'un article

-

- Render : Image avec un fond transparent

qui sert à faire une création

-

- Stock : Image avec un fond qui sert à faire une création.

-

- Modes de fusion : Ce sont tous les modes qui permettent d'intégrer

une image

texture

C4D

dans un fond.

Il n'y en a pas sur tout les logiciels

(Photofiltre notamment)

-

- Typographie (ou Typo) : C'est l'écriture sur une création.

-

- Brush : Petite image noire téléchargée

ou enregistrée sur un fond blanc (ou transparent)

qui permet d'agrémenter une création.

Elle est souvent coloriée,

utilisée pour faire un masque d'écrétage

ou mis dans différents mode de fusion.

-

- Masque d'écrétage : C'est image se trouvant dans un brush

(généralement une partie de la bannière).

-

- Coloring (ou colo) : C'est le fait de changer de couleur une image.

-

- Incrustration : C'est le fait qu'on est l'impression

qu'une image est bien intégrée dans un fond.

-

- Smudge : Technique de graphisme qui consiste

à barbouiller avec l'outil droit une image.

L'effet donné sert souvent de base à un fond.

-

- Texture : Image permettant d'agrémenter un fond.

-

- C4D : Formes abstraites 3D

faite avec un logiciel Cinema 4D.

Elle servent à agrémenter un fond

et à mettre en valeur quelque chose.

-

- Scanlines : Lignes diagonales

qui servent à agrémenter une création.

-

ordinateurs (78)