iGloo-Web

Introduction

Longtemps le Web a été inaccessible à tous...Aujourd’hui et ce depuis plusieurs années, n’importe qui peut réaliser un site tout à fait correct sans la moindre connaissances dans les langages de programmations web tels que le xHTML ou le PHP. Dans ce cours nous verrons pas à pas les étapes d’une réalisation d’un site Internet amateur mais néanmoins très fructifieux.

Préparer le terrain...

Pourquoi faire un site web ?

Tout d’abord, les raisons peuvent être plus ou moins importantes: on peut faire un site web pour partager des photos avec la famille ou des internautes. On peut faire un site web pour raconter une expérience, conseiller quelque chose ou quelqu’un, promouvoir quelque chose...Les raisons importent peu, tout ce dont vous avez besoin est de focaliser un champ d’activité et de faire pousser votre matière sur ce rayon là.

Ai-je le temps pour me consacrer à un site web?

La conception d’un site Internet peut être très rapide, surtout si on utilise un logiciel du type iWeb. Le plus difficile, c’est de savoir si vous avez vraiment le temps et/ou l’énergie nécessaire afin de mener à bien un projet comme ça. Pour exemple: DashMac est à peine lancé mais il nous prend à Romain et à moi-même au moins 3 heures par jour. Certes, nos objectifs sont peut-être plus larges que ceux que vous choisirez mais gardez ça en tête tout de même.

L’hébergement

Vous ne le savez peut-être pas, mais il vous faut héberger votre site web .. sur le web. Ca peut paraître évident mais on n’y pense pas toujours. L’hébergement est une des choses les plus importantes pour un site internet. Il existe des hébergements gratuits comme payants.

Payant ou gratuit

Si vous êtes une entreprise, alors la question ne se pose même pas: vous aurez besoin d’un hébergement payant ne serait-ce que pour montrer le sérieux de votre infrastructure. Si vous êtes un particulier, alors il y a plusieurs facteurs à prendre en compte: tout dépend de ce que vous allez faire pour votre site. Si c’est un petit site web perso où vous posterez les photos de familles etc, alors vous n’aurez pas forcément besoin. A noter que l’hébergement gratuit n’a aucune obligation envers vous: il peut placer des publicités sur votre site sans votre consentement ou encore vous supprimez votre site sans même vous prévenir. DashMac en a d’ailleurs déjà fait les frais, c’est pour ça que nous passons sur un hébergement plus "pro" .

• Dans le cas où vous optez pour une solution gratuite: je vous recommande e3b.org qui est un service gratuit et sans pubs, avec un espace de stockage de 250 Mo. Il vous faudra juste obtenir un code à l’inscription sur un numéro surtaxé.

• Dans le cas où vous prenez un hébergement payant: OVH ou 1&1 sont de très bon hébergeurs, à tous les prix.

• Troisième solution: vous choisirez de vous héberger vous même. C’est une solution qui sera abordée lors d’un tuto prochainement quand l’admin de DashMac recevra son infrastrucutre.

Le logiciel

Dans ce tutoriel, nous utiliserons iWeb qui est un logiciel gratuit si livré avec iLife. Après, il existe d’autres très bon logiciels sur Mac comme sur PC

Le contenu

Ca, c’est à vous d’y réfléchir! Votre contenu doit être attirant, original ça serait bien aussi et surtout agréable à regarder. Un site avec plein de fautes d’orthographes, insultant...Ca donne pas envie à consulter...

...On s’y attaque!

Découverte de l’interface de iWeb

Au premier lancement du logiciel, iWeb vous demandera de configurer un nouveau site et de choisir un nouveau thème. Si il ne le fait pas, faites tout simplement Maj + Cmnd + N puis Cmnd + N . Le thème est la charte graphique, le design de votre site. Dans ce tutoriel nous verrons comment faire pour créer un site avec un podcast, une galerie photo, et un blog. Commencez par choisir un site dont le thème est "Podcast" .

Voilà une capture de iWeb en pleine utilisation. Vous allez voir, c’est vraiment pas compliqué:
A gauche, vos pages/site. L’onglet site déroule sur chaque page qui contient le genre de page: Blog, Podcast ou encore galerie photo. En haut, les pages qui s’affichent pour chacune des "catégories" ou "genre" appellez ça comme vous voulez. Au centre, bah c’est l’aperçu de votre site. A droite, c’est quelque chose que je trouve hyper pratique: les onglets musiques, séquences, photos renvoient directement vers le contenu de iTunes et iPhoto! . Pour insérer une vidéo ou une musique, c’est tout simple! Il suffit de glisser déposer dans la page, comme dans l’exemple ci-dessous.

Ohhh ! T’as mis un film de Gad Elmaleh sur ton blog...Allez je peux faire un gros site avec plein de films en ligne hébergés par moi-même ?

Petit comique! Non il n’en est pas question! Vous n’avez pas du tout le droit de diffuser des choses dont vous n’avez pas les droits! Oubliez donc pour le super gros site de streaming ou le partage de musique en ligne, c’est tout simplement illégal. Faites aussi attention aux photos que vous postez.

Maintenant, allez sur l’onglet site. Vous verrez que la page du centre change pour laisser place à des réglages sur votre site Internet. Tout d’abord, on vire MobileMe si on utilise un hébergement autre que MobileMe ... En général, vous choisirez FTP.

Il vous faut remplir ce formulaire en fonction des informations fournies par votre hébergeur bien entendu.

Allez, continuons ! Allez dans la zone en haut à gauche et faites un clique droit sur votre souris.

Vous allez créer maintenant la page Blog de votre site web personnel. Vous choisirez un thème Galérie de photo, je vous conseille néanmoins de garder le même genre de thèmes ou en tout cas dans les même tons tout au long de votre site, c’est plus sympa à regarder... Ensuite c’est très simple: à nouveau, il vous suffit de glisser une à une (ou plusieurs à la fois) les photos que vous souhaitez afficher dans la page. Un diaporama est ensuite faisable à partir du web. Easy non ?

Des vidéos externes sur iWeb

Il est facile d’insérer une vidéo de YouTube depuis iWeb, un widget est prévu pour ça. Mais comment faire pour mettre une vidéo de DailyMotion par exemple ? ou de MegaVideo ? Il faut passer alors par l’intégration de code HTML au sein d’une page iWeb.
Démonstration.
Je sélectionne d’abord la vidéo en me rendant à l’adresse de la vidéo depuis Safari :
Je veux une vidéo de Eminem, Without Me ; je tappe Eminem Without Me sur Dailymotion et je clique sur un résultat. Il y ensuite une petite case avec un code où il est écrit : lecteur exportable.

Vous copiez donc ce code qui ressemble à quelque chose comme ça :

Code HTML :

Vous allez ensuite dans les widgets de iWeb, et vous cliquez sur HTML. Vous le glissez, déposez comme d’hab', là où vous voulez que la vidéo apparaisse, et le tour est joué ! Il suffit juste de coller le code copié précédemment.

Pour créer la section <<Blog>> de votre site il vous suffit de refaire l’opération pour Galerie de photo en modifiant juste le thème..

Voilà vous savez l’essentiel pour créer un bon petit site web rien qu’à vous, n’hésitez pas à nous montrer vos réalisations nous en serons plus que contents. Des commentaires et des critiques sont, comme d’habitude, toujours bien perçues si énoncées correctement et de manière constructive.

A bientôt !