WebDesign

Histoire d’Internet

Cours en PDF

Voir cette vidéo
TimeLine interactive de l’histoire du Web http://www.evolutionoftheweb.com/?hl=fr
Evolution d’un bureau de 1984 à 2014 http://vimeo.com/107569286
http://www.choblab.com/wp-content/uploads/2011/04/Evolution-of-web-design.png
http://www.webdesigndegreecenter.org/wp-content/uploads/2013/11/The-Evolution-of-Web-Design.png

Le Web 2.0

Cours en PDF

Le WebDesign

Cours en PDF

Chartes Graphiques

Pour le Responsive
http://mediaqueri.es

Le Flatdesign

A lire :
http://www.alsacreations.com/article/lire/1696-tendances-web-design-2016.html
http://www.jebossedansleweb.com/tendances-web-design-2016/
http://www.axance.fr/12-tendances-webdesign-2015/
https://www.anthedesign.fr/webdesign-2/tendances-webdesign-2015/
http://obsedo.com/portfolio/webDesignTendances2015.pdf
http://blog.canal-web.fr/delphine/webdesign/les-tendances-du-webdesign-2015/
http://www.alsacreations.com/article/lire/1657-tendances-du-webdesign-2015.html
http://www.cafe-numerique.com/ux/flat-design-material-design-design-thinking-309

Méthodologie de travail

Synopsis / Note d’intention
Story-Board
Rétro-planning

Story Boards
Page Wikipedia / Exposition virtuelle Cinémathèque / A voir / StoryBoard vierge
Dans le cadre d’un projet multimédia : Wireframe / Zoning et Storyboard
A lire et pour l’architecture de l’information

Des outils : 
Indigo studio pour Mac et pour PC
Et des applications OnLine Gliffy / MockFlow / iplotz

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…

WordPress

Wikipedia WordPress
Le portail WordPress

WORDPRESS est un CMS (Content Management System) libre et gratuit. Il est entièrement personnalisable grâce à de nombreux thèmes et extensions, 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 être aujourd’hui le WEB 2.0.

Installer un CMS comme WordPress
Pour toutes ces manipulation vous pouvez voir ces Tutoriels.
> Choisir un hébergement par exemple :
Gratuit : http://www.000webhost.com
Payant : http://www.ovh.com/fr/index.xml l’abonnement perso est très bien.
> 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
http://responsive.is/typecast.com

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.

Cours en PDF (Thèmes et Plugins)
Cours en PDF (le succès d’un site web)

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 :
Simple = http://wpthemess.net/simple/
Element = http://wpthemess.net/element-wordpress-theme/
Celestino = http://wpthemess.net/celestino-clean-and-creative-portfolio-theme/
Ink = http://wpthemess.net/ink-wordpress-theme/
Grid = http://dessign.net/grid-theme-responsive/
Fontfolio = http://dessign.net/fontfolio-theme/
Tesla = http://teslathemes.com/wp-themes/tesla/
Hatch = http://alienwp.com/themes/hatch/
vFlex = http://www.vibethemes.com/theme/vflex-theme/
Workality = http://northeme.com/theme/workality-lite/
Pytheas = http://www.wpexplorer.com/pytheas-free-wordpress-theme/
Gridly = http://www.eleventhemes.com/gridly-theme/
Portfolio Press = http://wordpress.org/themes/portfolio-press
ArtWork = http://dessign.net/art-works-responsive-theme-free-2013/
Goodly = http://wpthemess.net/goodly/
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/

Generateur de Logotype
https://www.graphicsprings.com
http://fr.onlinelogomaker.com
https://logomakr.com
https://logotypemaker.com
http://www.makelogoonlinefree.com

Lorem Ipsum
http://fr.lipsum.com

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/
https://fr.wordpress.org/plugins/ml-slider/
– Faire un portfolio en plus des articles et des pages
http://wordpress.org/plugins/custom-content-portfolio/
https://wordpress.org/plugins/flatfolio-flat-cool-wp-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://fr.wordpress.org/plugins/better-font-awesome/
Reseaux sociaux (SHARE)
https://fr.wordpress.org/plugins/addthis/
Traduire un theme
https://fr.wordpress.org/plugins/loco-translate/
Améliorer la mise en page
https://wordpress.org/plugins/advanced-custom-fields/

Pour le référencement /à lire : 
https://support.google.com/webmasters/answer/35769?hl=fr&topic=1724121&ctx=topic
https://support.google.com/webmasters/answer/40349?hl=fr

http://www.webrankinfo.com
http://www.zorgloob.com
http://blog.axe-net.fr

Pour la sécurité :
Vous pouvez lire :
https://securiteinformartique.wordpress.com/2011/11/12/les-types-de-piratage/
http://www.ya-graphic.com/2015/06/9606-site-wordpress-pirate-4-signes-qui-lindiquent/
http://www.mauricelargeron.com/proteger-son-serveur-des-intrusions/
http://wpformation.com/piratage-plugin-theme-wordpress/

– 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/