INTERACTION

Site Web

Télécharger (PDF, 327KB)

Faire son Portfolio (super simple : pour les nuls)

> un blog pour présenter son travail :
https://www.blogger.com/
http://www.canalblog.com

> un blog orienté image
http://www.tumblr.com
Des themes gratuits et des payants avec la possibilité de faire des présentations assez visuelles
http://www.tumblr.com/themes/
http://themes.themaxdavis.com/themes/
http://themes.modernise.us

> Créer un Book en ligne
http://creabook.com sorte de book mixé avec un réseau social par Etapes
http://www.ultra-book.com/graphiste pas trop mal
http://www.coroflot.com en anglais uniquement dommage
http://www.portfoliopen.com Toujours en anglais
http://carbonmade.com assez mignon
http://www.krop.com un peu réseau social
http://www.behance.net la plus célèbre des plateformes pour graphistes

> Se faire un site complet super simple
http://fr.wix.com
Avec des template nombreuses http://fr.wix.com/website/templates/html/creative-arts/portfolio/1
des exemples ici http://fr.wix.com/sample/website
A lire : http://fr.wix.com/blog/2013/01/21/creer-portfolio-de-designer/

Ou bien Jimdo https://fr.jimdo.com
et pour finir http://cargocollective.com

WordPress

Wikipedia WordPress
Le portail WordPress

Exemples de sites réalisés avec wordpress :

http://www.ensa-nancy.fr
http://wpinspiration.com
http://welovewp.com
http://www.blogotheque.net/
http://www.lasamaritaine.com
http://www.milkdecoration.com
http://www.resultatsbaccalaureat.fr
http://grzegorzkozak.pl/
http://lindseybreeden.com/
http://freehandfuturist.com/
http://www.milkable.me
http://www.porte-sainte-claire.com

WORDPRESS est un CMS (Content Management System) libre et gratuit. Il est entièrement personnalisable grâce à de nombreux thèmes et extension, en outre, il existe une solide communauté à travers le monde entier.

Présentation de WORDPRESS
Téléchargement de WORDPRESS

WORDPRESS s’intègre pleinement dans ce que peut etre aujourd’hui le WEB 2.0

Avant de vous lancer tête baissée sur votre ordinateur et de créer un site internet, prenez le temps de rédiger un dossier papier contenant :

  • Des réponses à ces différentes questions : Que vais-je faire de mon site ? Qui va lire mon site ? Sur quel type de machine va t’on consulter mon site ? Quel type d’informations je vais y mettre ? Que sera la périodicité de mes mises à jour ? Mon site sera t’il participatif, si oui comment ?
  • Mettre en place une arborescence du site (les catégories / les pages et les sous-pages…) et faire apparaitre une nomenclature sur cette arborescence.
  • Faire un brouillon papier d’une page type (Header / Navbar / Colonnes / SideBar / Footer) avec des cotes en pixel en préparation des images…

Installer un CMS comme WordPress
Pour toutes ces manipulation vous pouvez voir ces Tutoriels.
> Choisir un hébergement par exemple :
Gratuithttp://www.000webhost.com
http://www.hostinger.fr/hebergement-gratuit
https://shost.ca/fr/
http://www.rezoo.fr/hebergement-internet.html
Payanthttp://www.ovh.com/fr/index.xml l’abonnement perso est très bien.
http://www.o2switch.fr/hebergement-illimite/
https://www.1and1.fr/hebergement-web
http://www.1hebergement.com
> Mettre en place une base de données MySQL
> Installer les fichiers avec un logiciel de FTP CyberDuck est très bien : http://cyberduck.io et voir ce Tuto.
> Installer WordPress voir ce Tuto : Celui ci ou celui là

Voir cette page pour l’interface WordPress
Pour bien protéger son site blinder ses mots de passe : générateur de mot de passe
Penser au Responsive avec ces sites par exemple :
http://www.responsinator.com
http://responsivetest.net

Le WebDesign

Cours en PDF
Le Flatdesign

Exemples de Charte Graphique :
Print = arte (2008 / 2011) / CNRS
Web = CNRS / Unesco

Site en HTML5 à voir plutôt avec Chrome
http://works.jonobr1.com/Patatap
https://www.peanutgalleryfilms.com/
http://500.chromeexperiments.com/
http://thecolorsofmotion.com/films
http://summer.tcm.com
http://blacknegative.com

Flat Vs Burtalism

Le Flat Web-Design (traduction : design web plat) est une catégorie de design web qui se caractérise par une absence de tout ce qui peut suggérer un effet de profondeur (ombre, 3D, dégradé …), de textures ou d’une manière générales de tout élément purement “décoratif”. Le flat design, qui est typiquement un design “à plat”, est une représentation minimaliste où théoriquement chaque élément du design à une fonction. A l’origine l’interface Metro de Microsoft puis Windows 8.

Caractéristiques du Flat design

Les interfaces élégantes sont celles qui ont le plus d’impact, avec le moins d’éléments.

1- Couleurs
Elles sont fondamentales en Flat Design, elles font ressortir les éléments et les hiérarchisent. On preferera les palettes uniformes en évitant les mélanges entre couleurs vives et pastels.
http://flatuicolors.com
http://couleurs.optimisation-web.com

2- Images & Illustrations
Ne pas trop en mettre pour ne pas dénaturer le design générale de l’interface, utiliser les profondeurs de champ et les flous pour faire ressortir du texte, et l’illustration vectoriel flat est reine (plus rapide en chargement).
https://dribbble.com/search?q=flat
https://www.behance.net/search?content=projects&sort=appreciations&time=week&search=flat

3- Typographie
La typographie doit permettre de structurer l’information. Le Flat Design met en avant la simplicité typographique, donc éviter les sherifs
https://fonts.google.com
https://www.templaza.com/blog/best-fonts-for-flat-ui-design/62

4- Icônes
Indispensables, il vaut tout de même mieux limiter leur formes et leurs aspects.
http://www.flaticon.com
https://icons8.com
http://www.blogduwebdesign.com/ressources/10-packs-icons-webdesign-flat-design/1044

Pour plus de détails voir le site Google sur le Material Design (c’est du Flat mais avec une philosophie)
https://material.io/guidelines/

Le Brutalisme est une tendance du Webdesign qui tend à perturber l’esthétique prévisible du web.
Se rebeller contre le Flat mais avec quelque part les mêmes armes = le minimalisme.
Par certains aspects on peut trouver les sources du Brutalisme dans le web première génération, celui du milieu des années 90. A cette époque cette esthétisme était surtout dicté par un manque d’outils et de technologie, aujourd’hui le Brutalisme est plutôt une réaction épidermique par rapport au coté très lissé du Web.

On trouve aussi comme inspiration un mouvement architectural : Le Brutalisme (de Brut comme Beton brut)
Le brutalisme désigne un style architectural issu du mouvement moderne, qui connait une grande popularité entre les années 1950 et 1970 avant de décliner peu à peu, bien que divers architectes s’inspirent encore des principes de ce courant. Il se distingue notamment par la répétition de certains éléments comme les fenêtres, ainsi que par l’absence d’ornements et le caractère « brut » du béton.

Les premiers exemples d’architecture brutaliste sont inspirés des travaux de l’architecte franco-suisse Le Corbusier, notamment de sa Cité radieuse (1952). Le brutalisme s’exprime notamment à travers la réalisation de bâtiments institutionnels et d’universités au Royaume-Uni, en France, en Europe de l’Est et aux États-Unis. Généralement de dimensions imposantes, ces édifces mettent en avant leur verticalité et la rudesse du béton, constituant une réaction aux courants architecturaux antérieurs (le style Beaux-Arts notamment), marqués par davantage de frivolité.

Le terme de brutalisme a parfois servi à désigner de manière générale les édifces massifs en béton, devenus impopulaires à la fn du XXe siècle. Les principaux représentants de ce courant sont Marcel Breuer, Erno Goldfnger, Jacques Kalisz, Bertrand Goldberg et Fernand Boukobza.
https://fr.wikipedia.org/wiki/Brutalisme
https://www.ssense.com/fr-fr/article-vedette/a-10-building-guide-to-brutalist-architecture

WEB 2.0 :

Le Web 2.0 est une évolution du Web vers plus de simplicité (ne nécessitant pas de connaissances techniques) et d’interactivité (permettant à chacun de contribuer sous différentes formes). L’expression « Web 2.0 » désigne certaines technologies et des usages du World Wide Web qui ont suivi la forme initiale du web, en particulier les interfaces permettant aux internautes ayant peu de connaissances techniques de s’approprier les nouvelles fonctionnalités du web. Ainsi, les internautes contribuent à l’échange d’informations et peuvent interagir (partager, échanger, etc.) de façon simple, à la fois avec le contenu et la structure des pages, mais aussi entre eux, créant ainsi notamment le Web social. L’internaute devient, grâce aux outils mis à sa disposition, une personne active sur la toile.
Voir la page WIKI.
Voir cette vidéo sur ce qu’est Wikipédia
Voir cette autre vidéo aussi.
Un articles à lire

Des blogs à consulter :
http://www.fredcavazza.net
http://www.simpleweb.fr
http://www.interfacesriches.fr
http://www.mediassociaux.fr 
http://www.weblife.fr
http://www.webrankinfo.com
http://owni.fr
http://www.laquadrature.net/fr 

Dossier WEB 2 et applications en ligne

Suite

Un fois tout en place bien choisir ses plug-in et ses thèmes.

> Thèmes
Un thème va vous permettre de modifier l’apparence et la mise en page de votre site. L’installation d’un nouveau thème est très simple. Deux solutions s’offrent à vous :

  • L’installation automatique : Dans ApparenceThèmes cliquez sur l’onglet Installer des thèmes puis sélectionnez les paramètres en fonction de vos besoins et valider. Une page de choix de thèmes issus de la galerie officielle correspondant à vos critères s’affichera. Aperçu vous offre la possibilité de voir le rendu du thème sans avoir à l’installer. Si cela vous convient faites Installer puis Installer maintenant. Une fois mis en place, il ne vous reste plus alors qu’à l’activer.
  • L’installation manuelle : Transférez par FTP le dossier contenant votre thème dans le dossier wp-content/themes de votre installation WordPress puis activez-le dans l’interface d’administration, dans ApparenceThèmes.

Faire une recherche sur internet pour touer un thème ideal. Vous pouvez pas exemple taper ces mots clés dans votre moteur de recherche préféré :
thème WordPress responsive free portfolio design minimalist…
Quelques adresses à voir :
Un blog spécialisé en thème WordPress
Des thèmes responsive qui peuvent convenir à vos projets :
Shapely =https://colorlib.com/wp/themes/shapely/
Illdy = https://colorlib.com/wp/themes/illdy/
Sparkling = https://colorlib.com/wp/themes/sparkling/
Pinbin = https://colorlib.com/wp/themes/pinbin/
Sydney = http://athemes.com/theme/sydney/
Astrid = http://athemes.com/theme/astrid/
Creative = http://dessign.net/creative-portfolio-theme-responsive-free/
GK Portfolio = https://fr.wordpress.org/themes/gk-portfolio/
Portfolio Gallery = https://fr.wordpress.org/themes/portfolio-gallery/
Maker = https://themepatio.com/themes/maker/
Responsive Boat = http://themeisle.com/themes/responsiveboat-theme
ZBlackBread = http://themeisle.com/themes/zblackbeard/
Olevia = https://made4wp.com/themes/olevia/
Flatio = https://fr.wordpress.org/themes/flatio/
Zerif = http://themeisle.com/themes/zerif-lite/
Phogra = http://templatypus.com/gallery/details/template/phogra
Fukasawa = http://www.andersnoren.se/teman/fukasawa-wordpress-theme/
Oren = https://themeora.com/downloads/download-oren/
Olevia = https://wordpress.org/themes/olevia/
Gallery = https://dessign.net/gallery-theme-responsive-free/
Tesla = http://teslathemes.com/wp-themes/tesla/
Hatch = http://alienwp.com/themes/hatch/
Workality = http://northeme.com/theme/workality-lite/
SimpleCorp = http://www.s5themes.com/theme/simplecorp/
Adament = http://www.fabthemes.com/adament/
Siren = http://www.fabthemes.com/siren/
Revera = http://www.fabthemes.com/revera/

Suite

> Plug-in utiles pour vos sites :
– Mettre une page en travaux
https://wordpress.org/plugins/ultimate-coming-soon-page/
– Un slider en home
https://wordpress.org/plugins/animate-slider/
– Faire un portfolio en plus des articles et des pages
http://wordpress.org/plugins/custom-content-portfolio/
– Des stats pour votre site
http://wordpress.org/plugins/wp-slimstat/
http://wordpress.org/plugins/statpress/
– Un formulaire de contact
https://wordpress.org/plugins/contact-form-7/
– Bouton de Easy Scroll
https://wordpress.org/plugins/dynamic-to-top/
– Lightbox ou colorbox sur toutes les images
https://wordpress.org/plugins/jquery-colorbox/
– Un plugin de SEO (référencement)
https://wordpress.org/plugins/wordpress-seo/
– Shortcode pour Icon Font Awesome
https://wordpress.org/plugins/font-awesome-more-icons/
– Traduction de Theme et de plugins
https://fr.wordpress.org/plugins/loco-translate/

Pour la sécurité :
– Contre les attaques en force brutes, limiter le login pour l’administration.
http://wordpress.org/plugins/limit-login-attempts/
http://wordpress.org/plugins/login-lockdown/
– Bloque automatiquement des requêtes malicieuses dans les URL
http://wordpress.org/plugins/block-bad-queries/
– Changer les adresses wp-admin et encore bien d’autres choses…
http://wordpress.org/plugins/better-wp-security/

Pour les BackUp vers Google Drive / DropBox…
http://wordpress.org/plugins/updraftplus/
http://wordpress.org/plugins/backup/
https://wordpress.org/plugins/wp-google-drive/
http://wordpress.org/plugins/backwpup/