Le nouveau look du site Apple, comment réaliser le menu en CSS...

[Guest_Sir Morgan_*]

Ainsi que vient de le souligner une des dernières news, le site apple.fr vient d'emboîter le pas du site US.

J'ai pensé que cela pourrait être utile de disposer du menu du site pour, le cas échéant, s'en inspirer.

Je l'ai donc reconstitué pour l'occasion >
Encyclopedia des Corsaires

Enjoy.

[bruno05]

Tip-top, merci aux Corsaires !

[Guest_Sir Morgan_*]

Je t'en prie... ... avec les Corsaires, c'est toujours Noël, même en plein mois d'août !

Tuto à venir prochainement (quand je rentrerai de la plage) > comment gérer un menu CSS avec tous ses effets, mais côté serveur, en php.



à bientôt.

[onc'camille]

Very good

[gilloo35]

Hello Sir Morgan,

Je viens d'ouvrir les sources de ce menu et j'ai eu la surprise (je suis un peu newbe en matière de CSS) de constater que ce type de menu faisait appel à une seule et même image, celle-ci faisant apparaître chacun des items du menu sous chacun de ses états.

Ma question peut paraître idiote, mais je serais curieux de savoir quels sont les avantages/inconvénients de cette technique par rapport à celle (par exemple) utilisant le javascript ? ... Force m'est d'avouer que j'en suis moi-même resté à ce niveau de réalisation (via Dreamweaver)

Merci

[Guest_Sir Morgan_*]

Salut, gilloo35,

Retour de plage... je réponds un peu tardivement, donc.

Il existe plusieurs techniques pour faire des menus (visuellement) dynamiques.

Le rollover est l'une des plus courantes. Généralement, on utilise deux images qui représentent les deux états (normal et survol). Mais que l'on fasse appel au javascript ou au CSS, cette technique présente quelques inconvénients. Entre autres, elle nécessite de déclarer via javascript le préchargement des images pour éviter le temps de latence au survol du lien (même en cas de CSS).

Par ailleurs on sait que javascript, malgré son grand intérêt, nécessite d'être activé et est aussi considéré comme "intrusif". Même si le pb de sa désactivation tend à disparaître peu à peu, il faut quand même le prendre en compte.

Mais cela ne rend pas pour autant le CSS exempt de reproche, en particulier celui des compatibilités selon les navigateurs.

Bref, ce n'est pas moi qui prêcherai une technique contre l'autre, sachant d'autant plus qu'elles sont souvent merveilleusement complémentaires. Je pense donc que ces choix se font selon qu'on se sent plus à l'aise avec l'un que l'autre.

Pour la construction de menus en CSS, une technique est apparue voici quelque temps déjà, désignée selon l'expression imagée "sliding doors"... "portes coulissantes" in french. Sans entrer dans les détails ici, disons qu'il s'agit d'une technique qui combine plusieurs propriétés de CSS : capacité à superposer plusieurs images d'arrière-plan et celle qui consiste à "détourner" les balises de listes non-ordonnées.

Je te laisse le soin de rechercher la littérature à ce sujet.

Dans le cas du menu Apple, il ne s'agit encore d'une autre technique qui, s'inspirant du principe des portes coulissantes, s'approche davantage du rollover. Mais elle est différente du rollover évoqué plus haut car on fait appel, dans ce cas, à une seule et même image, représentant tous les états des boutons. Grâce à la propriété background-position on fait monter ou descendre l'image selon l'action de la souris.

Mais j'ai un tuto en prépa sur tout ça, avec pincée de php à ma façon. On en reparlera.

[gilloo35]

Merci pour ta réponse très complète
... et je t'envie pour la plage
... mon tour operator a annulé mon départ 5 jours avant le jour J

A plus pour ton tuto.

[Guest_Sir Morgan_*]

Ben voilà... le tuto du "Menu Apple" + php est en ligne > ICI

Enjoy

[eldi`]

Merci pour ces 2 sources, ça fait quelques temps que je cherchais des infos sur le sliding door.

[GreggyDesign]

Merci bien, c'est bien sympotoch ça !

[Guest_Sir Morgan_*]

Merci pour vos encouragements...

... à suivre (d'autres idées en cours)....

[Fribourg]

La template de base de joomla utilise cette technique si je ne m'abuse?

[Guest_Sir Morgan_*]

Si tu parles des menus, non.

Joomla utilise le principe du rollover (comme tant d'autres) avec une seule image pour les menus (deux états : normal/survol), mais pas le principe que j'ai décrit pour l'état du menu, celui-ci une fois cliqué.

Cette technique (rollover+php), que j'ai reconstruite par moi-même en réflechissant un peu (sans en revendiquer la paternité spécialement) finira par s'imposer, j'imagine. Mais pour l'instant, je n'ai pas le sentiment que ce soit très répandu, non ?

[Fribourg]

Je me débrouille pas assez dans les langages web pour voir la différence
Ah oui
Je vais potasser tes fichiers...
Merci

Ce message a été modifié par Fribourg - 28 Aug 2007, 08:29.

[narolf]

Bonjour,

Je me demandais comment était fait le site d'Apple... ça ressemble à du flash (comme le compte à rebours en ce moment) mais quand on clique droit sur la page, on n'a pas le menu habituel des sites en flash... Avez-vous une idée ?

Merci

[Guest_Sir Morgan_*]

Oui, j'ai une idée. Cela n'a rien à voir avec du flash...

C'est du html/JavaScript.

Allez, tiens... cadeau !


Il suffit de changer la date dans le fichier index... là je t'ai mis un compte à rebours jusqu'à Noël mars 2008

Ce message a été modifié par Sir Morgan - 7 Jan 2008, 13:01.

[narolf]

Merci, mais en fait je demandais ça pour le site entier... Le compte à rebours n'était qu'un exemple... Donc ce serait du html tout con avec du javascipt ? parce qu'il a de la gueule...

Même l'insertion des vidéos, des disporamas, etc ?

En fait je me suis posé la question parce que je doute qu'ils aient fait le site avec iweb... Comme je sais plus quel magazine pro-PC qui bossait que sur des Macs, je me demandais si Apple était aussi "ouvert"

[Guest_Sir Morgan_*]

Ben... il suffirait que tu regardes le code des pages pour comprendre.

Il ne manquerait plus qu'Apple soit prisonnier d'un logiciel propriétaire (flash) pour son site !

[narolf]

J'ai regardé un peu le code mais je n'y comprends pas grand chose. Je fais certes des sites web mais avec Freeway (pas du tout de gestion de code). Donc je n'arrive toujours pas à comprendre comment sont faites les fonctionnalités du site Apple. Par exemple dans la partie "mac" du site, on a dans la colonne de droite un petit menu qui change lorsque l'on place la souris. Il y a avait aussi le compte à rebours, l'affichage des vidéos, des diaporamas, etc... J'aimerais bien comprendre...

De plus j'ai remarqué qu'en ouvrant quicktime seul (sans y glisser de vidéos) il ouvre un fichier Apple avec des liens cliquables. Je ne comprends pas non plus comment c'est fait. Quelqu'un pourrait-il éclairer ma lanterne ?

[tancred77]

commence par regarder les frameworks javascript du type http://script.aculo.us/

[narolf]

J'ai précisé ne rien connaître aux codes (c'est quoi un framework ?). Peut-être aurais-je dû également précisé que je ne parlais pas anglais...

[tancred77]

J'ai précisé ne rien connaître aux codes

houla alors je ne pense pas que tu pourras monter un site du type apple dans l'immédiat. Une petite formation s'impose.

[narolf]

C'est bien ce que je pensais... Mais si je pouvais déjà comprendre certaines choses...


Et je ne sais pas s'il faut connaître le code forcément... Par exemple, livestage pro semble capable de faire des choses très sympas avec quicktime, et apparemment ce serait convertible en javascript. Après comment ça fonctionne ça je sais pas. D'où ma curiosité...

[Guest_Sir Morgan_*]

Salut,

Tes questions sont légitimes. Mais tu dois aussi admettre que pour pouvoir expliquer certaines choses (et surtout que tu les comprennes), il faut un langage commun. Or là, il s'agit de t'expliquer comment fonctionne une bombe atomique sans que tu connaisses les particules élémentaires.

Je ne dis pas que c'est impossible, mais tout le monde n'a pas forcément le temps de te faire un cours magistral sur les langages liés au web. Je crois qu'il va falloir que tu prennes ton auto-formation à bras le corps et, dans quelque temps, tu seras à même d'obtenir ici de vraies solutions à de vrais problèmes concrets qui seront les tiens. Autrement dit : tu n'échapperas pas à quelques mois de trecking web, comme tout le monde. Je sais, c'est long, faut de la patience et c'est chiant. Mais le "tout, tout de suite"... c'est vraiment un syndrome qui n'a jamais fait progresser quiconque.

Pardonne-moi, je ne te fais pas la morale, crois-le bien... mais bon...

[narolf]

Ben justement... Je veux juste comprendre... Pas forcément savoir faire à tout prix et maintenant... Je demande juste les grandes lignes (après peut-être qu'on me les a données sans que je saisisse l'info). Je sais pas... Un truc du genre : "ils doivent utiliser tels et tels logiciels avec tels codes". Voilà. Désolé du dérangement. Je demandais pas une formation complète. Et je pensais que ça pouvait intéresser d'autres personnes sur ce forum. Autant pour moi...

[Guest_Sir Morgan_*]

Désolé du dérangement. Je demandais pas une formation complète. Et je pensais que ça pouvait intéresser d'autres personnes sur ce forum. Autant pour moi...

T'es un drôle, toi. Finalement, t'es en train de me dire que je n'en fais pas assez pour ta pomme.

Tu lis ce qui t'arrange, toi. Elle est bien bonne et surtout, évite de me (nous) remercier.

Prends des cours de français, également... "Au temps pour toi".

[_remi]

Salut narolf,

Les développeurs d'apple utilisent de plus en plus Ajax (ou Web2), avec un bon éditeur de texte tout simplement (Coda ?). Programmer en Ajax demande d'utiliser le Xhtml (un html propre), les CCS (feuilles de styles) pour la mise en page, le DOM (document Oject model) pour manipuler les balises 'noeuds' et le javascript pour interagir avec les 3 autres. Ajax est utilisé 'coté client' et peut recevoir les réponses 'coté serveur' avec l'object XMLHttpRequest (merci MicroSoft 8-).

@+

[Captain Bumper]

Ben justement... Je veux juste comprendre... Pas forcément savoir faire à tout prix et maintenant... Je demande juste les grandes lignes (après peut-être qu'on me les a données sans que je saisisse l'info). Je sais pas... Un truc du genre : "ils doivent utiliser tels et tels logiciels avec tels codes". Voilà. Désolé du dérangement. Je demandais pas une formation complète. Et je pensais que ça pouvait intéresser d'autres personnes sur ce forum. Autant pour moi...

Quand on veut faire du haut niveau, quelque soit le domaine, faut mettre les mains dans le cambouis. Graphiste/développeur web c'est un métier, et comme tous les métiers, il y a des études, des cours, des formations, sur plusieurs années... Personnellement, je ne connaissais rien au XHTML, Javascript, Ajax, PHP et pas grand chose de l'HTML il y a 3 ans 1/2, et j'ai commencé à monter un site pour notre association d'étudiants, presque tout de mes mains, je ne voulais pas prendre du pré-fabriqué, on n'est jamais mieux servi que par soi-même, et j'ai juste adapté d'autres scripts aux miens pour certaines choses. Bref, j'ai tout appris par moi-même, avec des tutos, des liens qu'on me donnait ici et là, en parallèle de mes 6 ans d'études et de ma thèse... Mais faut pas s'attendre à ce qu'on fasse le boulot à ta place, apprendre à faire ça, ça implique que tu te formes, que tu te mettent à l'anglais, aux rudiments de ces langages, aucun logiciel ne te fera ça tout seul, pour de la haute voltige, il y a le cerveau et les mains... Une fois que tu auras compris les bases, tu pourras passer aux stades supérieurs, et arriver à tes fins, il m'a fallu 3 ans 1/2 pour faire des choses correctes, sans plus, mais suffisantes pour ça... Si en revanche, tu veux qu'on te fasse les codes et le site à ta place, qu'on te dise de récupérer un truc tout prêt, avoir tout, tout de suite, tu rêves, personne ne fera pour toi tout le travail que ça représente...

Ce message a été modifié par Captain Bumper - 10 Jan 2008, 11:04.

[Hervé]

Prends des cours de français, également... "Au temps pour toi".

Sir Morgan, tu drevrais jeter un coup d'œil à ce topic, ceci afin d'éviter de relancer un éternel débat qui n'a pas lieu d'être. En effet, l'expression "au tant pour moi" est aussi valable qu'"au temps pour moi".

[Captain Bumper]

Prends des cours de français, également... "Au temps pour toi".

Sir Morgan, tu drevrais jeter un coup d'œil à ce topic, ceci afin d'éviter de relancer un éternel débat qui n'a pas lieu d'être. En effet, l'expression "au tant pour moi" est aussi valable qu'"au temps pour moi".

Euh, il semble quand même qu'au temps pour moi soit la graphie correcte, reconnu par les lexicologues... L'autre est minoritaire, à l'origine douteuse... Voir http://www.langue-fr.net/index/A/au_temps-autant.htm