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

Cours en PDF

Tendances 2018 / 2019

Cours en PDF

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.

Des blogs à consulter :
http://www.fredcavazza.net
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/
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/
Miyazaki = https://www.andersnoren.se/teman/miyazaki-wordpress-theme/
Koji = https://www.andersnoren.se/teman/koji-wordpress-theme/
Hamilton = https://www.andersnoren.se/teman/hamilton-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/
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 :
Un Page-Builder

https://fr.wordpress.org/plugins/elementor/
Mettre une page en travaux
https://wordpress.org/plugins/coming-soon/
Un slider en home
https://fr.wordpress.org/plugins/smart-slider-3/
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/
Fond d’écran
https://wordpress.org/plugins/advanced-backgrounds/
Micro-interaction
https://wordpress.org/plugins/amazing-hover-effects/
https://wordpress.org/plugins/animate-it/
https://wordpress.org/plugins/image-hover-effects/
Google fonts
https://wordpress.org/plugins/olympus-google-fonts/
https://wordpress.org/plugins/easy-google-fonts/
Social Sharing
https://wordpress.org/plugins/highlight-and-share/
https://fr.wordpress.org/plugins/social-warfare/
Du cache pour accélérer votre site
https://wp-rocket.me/fr/

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 tout faire
https://fr.wordpress.org/plugins/secupress/

Pour les BackUp vers Google Drive / DropBox…
http://wordpress.org/plugins/updraftplus/
http://wordpress.org/plugins/backup/
http://wordpress.org/plugins/backwpup/