Archive for December, 2009

Le langage HTML

Tuesday, December 1st, 2009

html

Envie de Programmation Web ?

Vous voulez vous initiez à la programmation d’un site web, mais vous ne voulez pas vous prendre la tête ?

Vous avez envie de vous prendre pour un programmeur en herbe et concevoir vous même vos pages internet ?

Il existe un moyen simple de satisfaire ces envies !  Pour cela, il vous suffit de deux choses : d’un navigateur, et du bloc note.

Présentation du HTML

Le langage HTML (HyperText Mark-up Language) est un language de  marquage, aussi appelé de structuration, ou de balisage. C’est un format de données conçu pour représenter les pages web. HTML permet de mettre en forme le contenu des pages, d’inclure des ressources multimédia (images, vidéo, formulaires de saisies…).

Le langage HTML permet la lecture de documents sur Internet à partir de machines différentes, grâce au protocole HTTP; permettant d’accéder via le réseau à des documents représentés par une adresse unique, appelée URL.

C’est donc un langage simple de programmation, qui avec un peu d’entraînement, peut être très vite maîtrisé. Les balises se retenant facilement.

Structure du HTML

Un document HTML est séparé en 2 parties, d’un côté, on retrouve un en-tête, et de l’autre un corps.  L’en-tête contient les informations principales du document, il s’agit donc là d’exposé le sujet que vous allez traiter avec un titre. Le corps de texte contient ce qui sera affiché sur votre page web.

Voici un exemple d’une structure d’un fichier HTML :

<html>

<head>

<title> Exemple d’une structure HTML </title>

</head>

<body>

Ceci est donc le contenu de la page web. Le titre mis entre les balises <title> et </title> n’apparait pas dans la page web, mais dans le bandeau de titre de votre naviguateur. Vérifiez vous devez donc lire “Exemple d’une structure HTML”. C’est bien ça ? ;-)

</body>

</html>

Essayer de taper cela dans votre bloc notes, une fois cette écriture effectuée, enregistré votre document avec l’extension “.html” .

Pour vérifier que cela marche, retrouver l’emplacement où vous avez enregistré votre document, puis ouvrez le. Normalement, votre icône de votre document doit être en rapport avec le navigateur utilisé.

(more…)

Relooking Wipiz !

Tuesday, December 1st, 2009

Bonjour à tous !!

Pour le relooking du site web, j’ai choisi Wipiz, un excellent site de déco d’intérieur que je vous RECOMMANDE visiter (enfin d’ici quelques mois…).

Oui car il vrai que je triche légèrement pour ce relooking qui serait plutôt un looking.
Le site Wipiz est en faite un site en lancement. Il existe réellement, mais n’est présent sur Google que pour le référencer auprès du moteur de recherche en vue d’un lancement commercial d’ici peu.
Je vais donc proposer une idée d’interface qui serait en accord avec le positionnement du site et les attentes de la cible.

Tout d’abord, un petit aperçu du site en construction actuellement. Attention ça pique les yeux !
Image 6

Vous remarquez déjà que le nom Wipiz n’est même pas écrit, car le site n’est la pour le moment que pour se positionner sur des mots clés (comme tableau ou toile par exemple).
Nous n’allons pas nous attarder sur le design actuel puisqu’il n’est pas réfléchi ou élaboré à des fins commerciales.

Voici ma proposition d’interface :

L’index.

Image 7

La bannière horizontale > Naturellement, on notifie le nom du site Wipiz ainsi qu’une baseline “We picture this” (en anglais pour coller à la tendance déco).
On ajoute aussi, à droite de l’écran, un rectangle qui sera sur toutes les pages du site. Il permet de s’identifier et surtout d’accéder à son compte donc à son panier à tous moments.

La prise de vue > Il s’agit ici d’une image google non définitive. L’intérêt d’une telle image (taille) est d’attirer la curiosité de l’internaute. C’est aussi de lui signifier que nous sommes sur un site de TABLEAUX et non d’affiches. C’est pour cela qu’il faudra shooter une pièce avec un visuel de tableau ou la tranche se distingue nettement.
L’accroche visuelle devra donc être soignée, c’est elle qui déterminera si l’internaute souhaite rester sur le site et y naviguer ou s’il quittera immédiatement la page d’accueil.

À droite de cette image d’accueil se trouvent des tableaux déroulant. Ce sont les meilleurs ventes ou les nouveautés que proposent le site. Ils permettent de montrer immédiatement à l’internaute le style de toiles proposé et surtout pourquoi pas, de le séduire et d’éveiller sa curiosité.

Les textes  en milieu et bas de page serviront à renseigner le consommateur sur la technique, le concept, la livraison ou tout autre élément de Wipiz. Après l’accroche très imagée du site, les textes doivent rassurer les consommateurs réticents. Ils peuvent aussi donner des conseils de déco, parler des tendances etc…

En bas se trouvent logiquement les mention légales.

Les couleurs  > un mot rapide sur les couleurs. Le fond est blanc pour rester neutre et ouvert. C’est un cible grand public, pas forcement amatrice d’art. Les sites de ventes en ligne sont souvent sur des fonds blanc qui attire plus l’oeil et rassure le consommateur (côté aseptique du blanc).

La titre sont simplement écrit dans une police légèrement plus manuscrite et de couleurs différente. Cela ramène de la couleur dans une page blanche et anime le site. Cela permet de ramener un peu “d’acidulé” et de pétillant en accord avec le nom Wipiz lui même plutôt pétillant. nous restons tout de même dans le sobre.

Les pages de tableaux.

Image 8

La page de présentation des tableaux reprend naturellement la même structure que la page d’accueil.

La présentation des tableaux se fait par catégorie avec des visuels en perspective pour une fois de plus bien intégrer l’idée que se sont des tableaux. Ils sont présenter par trois par ligne pour ne pas charger la page. Les titres en dessous (qui doivent être retravaillés) doivent permettre un meilleur référencement. Il reprendrons donc le plus souvent les mots toiles, tableaux, décoration, reproductions… tout en étant des liens pour constituer des zones chaudes.
Les prix affiché sur les tableau est important car il attire indéniablement le consommateur. Le rouge est en plus une couleur impactante qui fait ressortir le prix. C’est néanmoins un rouge foncé (bordeaux) qui atténue le côté discount.

Les tableaux défilants sur le côté de la page restent en place car ils permettent des “ponts” entre les catégories.
La rubriques idées tendances met en scène les tableaux dans un intérieur pour faciliter la représentation du consommateur. Ce sera aussi un lien pour donner des conseils d’harmonisation de couleurs, de mobiliers…

Voila pour ce relooking de site web (enfin ce looking).

N’hésitez pas à aller faire un tour sur Wipiz d’ici quelques temps, sinon d’ici la, vous pouvez aller sur le site de son “grand frère” : www.izoa.fr

Bonne continuation à tous.

PS : les dimensions sont naturellement complétement modifiées ce qui atténue fortement l’effet du relooking. Désolé pour vos yeux !