WW Web – Olivier Ageron

Site Web

Faire son Portfolio (super simple : pour les nuls)

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

> un blog orienté image Tumblr plus tellement tendance en ce moment
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/

> Créer un Book en ligne
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 https://fr.wix.com/website/templates
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
ou encore : https://fr.squarespace.com/
et pour finir http://cargocollective.com (avec la possibilité d’avoir un code éducation, il faut le le demander pour cette année = 782faba1)

WordPress

Wikipedia WordPress
https://fr.wordpress.org/
Le portail WordPress

Exemples de sites réalisés avec wordpress :

http://www.ensa-nancy.fr
https://www.whitehouse.gov/
https://www.nationalarchives.gov.uk/
https://www.nytco.com/
https://www.newyorker.com/
https://usbeketrica.com/fr
http://www.blogotheque.net/
https://www.vogue.fr/?international
https://www.wired.com/
https://www.cooperhewitt.org/
http://10×17.co/
http://www.lasamaritaine.com
http://www.milkdecoration.com
https://www.nomanssky.com/
https://pluto.tv/fr
https://blog.ted.com/
https://waaark.com/
http://www.milkable.me
https://studioouam.com/
https://www.beyonce.com/
https://rollingstones.com/
https://snoopdogg.com/
https://creativecommons.org/
…

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.
Téléchargement de WORDPRESS

WORDPRESS s’intègre pleinement dans ce que peut être 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 :
Gratuit :
https://fr.000webhost.com/
http://www.hostinger.fr/hebergement-gratuit
https://www.planethoster.com/fr/World-Lite
https://www.lws.fr/hebergement-web-gratuit.php
https://www.freewebhostingarea.com
https://www.toile-libre.org

Payant et éco-responsable
https://www.infomaniak.com/fr
https://www.ikoula.com/fr
https://www.hostpapa.eu/forfait-hebergement-web/
https://www.planethoster.com/fr/

Payant et moins éco-responsable
http://www.ovh.com/fr/index.xml l’abonnement perso est très bien.
http://www.o2switch.fr/hebergement-illimite/
https://www.ionos.fr/hebergement/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
> Installer WordPress voir ce Tuto : https://fr.wordpress.org/txt-install/
https://wpformation.com/installer-wordpress/

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 :
https://jamus.co.uk/demos/rwd-demonstrations/

Pour bien préparer son site voir ce PDF = Wireframe et prototype

Tester WordPress : https://wpsandbox.net/

Le WebDesign

Cours en PDF

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
http://500.chromeexperiments.com/
http://thecolorsofmotion.com/films
http://blacknegative.com
https://wildcatterla.com/
https://2019.makemepulse.com/
http://www.overthetinyhills.com/

Flat Vs Burtalism

Cours en PDF

Tendances 2022 / 2023

Cours en PDF

Eco-responsabilité et numérique

Tendances Internet LOW-TECH (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

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 Apparence, Thè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 Apparence, Thè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/

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/