Wiki Memo

perso & pour tous

Forma graphisme


Journée Graphistes YesWiki

http://site-coop.net/graphistes/wakka.php?wiki=PagePrincipale

http://pad.cdrflorac.fr/graphistes

http://sickdesigner.com/

http://www.css3generator.com/

http://www.ergologique.com/
http://www.lergonome.org/so/u.htm#/index.php
http://www.ergolab.net/

http://www.boxesandarrows.com/
http://www.useit.com
http://www.guuui.com/
http://www.usability.gov/

Dossiers du wiki

themes/pluskoloss/images
themes/pluskoloss/javascripts
themes/pluskoloss/squelettes/pluskoloss.tpl.html
themes/pluskoloss/styles/style.css

Modifier style.css et pluskoloss.tpl.html

Glossaire :

WYSIWYG : What You See Is What You Get (interface où l'utilisateur peut voir immédiatement ce à quoi ressemblera le résultat final, déjà interprété).
HTML : HyperText crayon Markup Language
CSS : Cascading Style Sheet
W3C : consortium énonçant les standards internationaux du Web (http://fr.wikipedia.org/wiki/World_Wide_Web_Consortium)

  • Liens à partager :

- http://site-coop.net/graphistes : le site de la formation.
L'onglet "wysiwyg" se compose d'un pad dans lequel on ecrit ses lignes de codes et par l'intermediaire des onglets en bas de page, on peut passer en mode visuel "source".
- http://kuler.adobe.com/ Site permettant d'obtenir code couleur
- http://colorschemedesigner.com/ Site permettant d'obtenir des palettes de couleurs
Generateur et visualisateur Css 3
- http://css3generator.com/ : generateur de syntaxe CSS3, avec compatibilité des navigateurs
http://www.colorzilla.com/gradient-editor/ : generateur de dégradés
- https://demos.mozilla.org/fr/ : demos html5
http://www.goetter.fr/ : site d'un designer HTML5
http://slides.html5rocks.com/ : presentation technique html5
http://www.css3.info/preview/web-fonts-with-font-face/ : comment mettre une police dans les css et pour trouver des typos libres (ou pas !) : www.dafont.com
http://www.kirsle.net/wizards/ttf2eot.cgi > Convertir les polices .ttf en .odt pour pouvoir les insérer dans le css.
http://www.zurb.com/playground/css3-polaroids galerie photos en css 3 avec effet zoom sympa
Ergonomie radicale
http://www.useit.com/
http://www.ergologique.com/
http://www.lergonome.org/so/u.htm#/index.php
Autres sources
Ergolab - Ergonomie informatique : Les principales méthodes
http://www.ergolab.net/articles/ergonomie-informatique-methodes.php
Usabilis - Tests d'utilisabilité : http://www.usabilis.com/methode/test-utilisateur.htm
Systeme de grille 960
http://960.gs/
J'ai fait un petit tuto --> http://outils-reseaux.net/stage/wakka.php?wiki=PageGS
Bling bling javascript
http://flowplayer.org/tools/demos/index.html
Ressouces en templates libres
http://www.oswd.org/
http://blogfreakz.com/web-design/html5-css3-the-future-of-web-design/
Choix template
Bra Gate : http://www.oswd.org/design/preview/id/3673
Anonymous : http://www.oswd.org/design/preview/id/3685
+ koloss --> http://sickdesigner.com/resources/HTML5-starter-pack/index.html

  • Cours Outils-Réseaux :

http://outils-reseaux.org/new/wakka.php?wiki=ContenuSqueletteHtml/slide_show
HTML : Hyper Text Mark-up Language, langage avec lequel on peut créer le squelette d'un site.
Principe de balises qui s'ouvrent et se ferment
ex :
<div> blabla </div>
HTML 5 : nouvelles balises, permettant entre autres d'intégrer nativement (sans appeler un lecteur vidéo ou audio extérieur) de l'audio ou de la vidéo directement à partir de l'HTML.
Webfonts : gestions de polices personnalisées (sans besoins qu'elles soient installées sur l'ordinateur de l'utilisateur). Ombrage, transparence, réflexion...
Dans la balise <head></head> méta données, informations qui n'apparaîtront pas dans la page. Entête du document. Déclaration et appel de la feuille de style dans la balise <head>, informations pour les moteurs de recherche.
Balise <body> = "corps" = contenu du template > partie visible
CSS : Cascading Style Sheet : applique les propriétés dans l'ordre où elles sont écrites (dernière prise en compte. Du haut de la feuille vers le bas, on va donc du général au particulier).
Permet de séparer la forme du contenu, et donc d'avoir plusieurs stles différents pour un même contenu texte (ex : http://www.csszengarden.com/tr/francais/)
Fonctionne également avec un système de balises ouvrantes ( "{" ) et fermantes ( "}" ). Chaque balise dans le squelette HTML trouve son équivalent dans la feuille CSS (ex. <body> dans le html correspond à "body {}" dans le CSS).
La syntaxe est la suivante : Attribut { propriété : valeur ;}
Firebug : permet lorsque l'on est dans le navigateur web de visualiser l'html et le css d'un site internet, et de créer un lien visuel immédiatement constatable entre le code (css ou html) et ce qui apparait à l'écran. Permet également de changer en live les valeurs css (notamment), et de constater les modifications immédiatement sur le site visualisé.
svg : équivalent du .eps ou du .ai mais en libre
http://www.colorzilla.com/gradient
http://css3generator.com/
Dans une balise, on peut rajouter des attributs, dont id et class. Permettent de faire le lien entre BALISE html et css.
L'identitiant caractérisé par une ID est unique (contrairement à une classe), on peut l'appeler qu'une seule fois dans le code html. Permet d'attribuer un style très précis à une seule zone très précise.
Ex : <div id="toto"></div> --> dans fichier html
Ex : #toto { } --> déclaration dans feuille de style
Class n'est pas unique. Peut être répété plusieurs fois dans le code html. Optimisation du code.
Ex : <div class="toto"></div> --> appeler dans fichier html
Ex : .toto { } --> déclaration dans le fichier html.
Système de grille : grid960 --> 960.gs (960 pixels)
Marche aussi bien sur petit ordi que portable.
css a télécharger sur le site internet. (?)
Système de grille : grid 960 --> 960.gs (960 pixels, 12 ou 16 colonnes)
Marche aussi bien sur petit ordi que portable.
css a télécharger sur le site internet (avec déclaration des classes).
Une div pour préciser chaque colonne.
Ex :
<div class="grid_12>
  • <p>test test test test test</p>
</div>
Rendu harmonieux et simple à mettre en place.
Petit débat : graphisme vs (ou pas) ergonomie
Dans tous les cas, le graphisme gagne à s'appuyer sur l'ergonomie.






Il n'y a pas de commentaire sur cette page. [Afficher commentaires/formulaire]