"Galerie d'iframes" / test portfolio

Bonjour!

J'ai testé mon portfolio en appelant les sites dans des frames ce qui donne au final une "galerie d'iframes", ça m'intéresse d'avoir des retours..

c'est plutôt amusant de tordre le coup aux idées reçues comme quoi les iframes c'est le mal!! j'ai essayé de les utiliser pour ce qu'elle sont (un contenu extérieur qu'on veut afficher mais pas référencer) et pour le rendu on a un accès direct aux réalisations, ça participe au design.

Le code reste très simple au final : une seule page html, 2 images (une pour le body et l'autre pour le loading), une css qui s'adapte en hauteur et un peu de jquery! Coté référencement l'essentiel (si on désactive la css) : du contenu pour présenter l'activité, la liste des projets et le contact. votre avis est le bienvenue, je me dis que dans ce genre de cas les iframes sont bien adaptés (ça change d'une image statique avec un lien vers le projet)

http://www.loddesign.com/
Modifié par loddesign (05 Aug 2012 - 22:52)

Salut,

C'est pas désagréable, j'aime bien, et puis c'est fluide.

pAR contre,
Le seul cou que t'as du tordre c'est le tien pour faire ce site avec toutes ces frames et s'en profiter d'UTF-8 :

a écrit :
Intégration

+ le mailto sans encodage, paradis du spam.
+ les textes qui s'étalent trop à mon goût.
+ pas de responsive ou d'adaptive design, faut vraiment penser aux max 1024px je pense et puis avec toutes ces tablettes à 100 euros qui vont débarquer, c'est pas du luxe de se pencher là-dessus.

<troll>
Intéressant !
Mais vous ne vous êtes pas demandé pourquoi on dit que les frames, c'est le mal ?
</troll>

Merci pour les réponses c'est sympa de prendre du temps!

jmlapam
- Le site est bien en utf-8, tout html5/css3 au passage, je n'ai pas trop compris l'exemple avec les caractères spéciaux.
- il s'agit d'un mail professionnel, pour moi c'est que question d'accessibilité si tu vas sur les sites du w3c par-exemple les mails ne sont pas encodés
- les textes qui s'étalent trop à mon goût. > oui c'est une question de goût j'avais peur que le contenu soit un peu limité à vrai dire
- pas de responsive ou d'adaptive design,
> Bon là si tu regardes on est bien dans un "adaptive design" faut pas pousser hé hé en fait c'est un peu le but! déjà avec le gestion de la hauteur en pourcentage (sans js), il y a aussi un container avec un min-width de 1000px et le menu des images a un max-height de 1360px pour ne pas les déformer. Le reste s'adapte justement pour la fluidité et prendre tout l'espace du navigateur. Donc pour avoir testé sur ma tablette pas de pb à ce niveau bien au contraire!

Muchos
Les iframes "c'est le mal" pour plusieurs raisons je pense déjà à une époque reculée (l'ère du bas-débit) où les sites étaient structurées en tableaux certains utilisaient des iframes pour organiser les pages (mon menu dans une iframe donc tout seul sur une page html, mon footer dans une autre page, ...) donc pour le référencement et la sémantique de la page Web ça posait un sérieux pb! Y'a aussi le temps de chargement surtout si tu en mets plusieurs, dans mon cas les iframes sont chargés en js dc une à la fois (je pourrai optimiser ça mieux en passant)

Le but de l'exercice c'est de me poser la question pourquoi j'utilise des iframes et si c'est adapté, donc ici je les vois comme un aperçu intéractif on va dire, mon contenu et la structure de la page ne dépendent pas de cette iframe dans le sens où ça me suffit de présenter ce que je fais, lister les projets et mettre mon contact.
Modifié par loddesign (07 Aug 2012 - 18:45)

Bonjour,

Site impossible à naviguer sous IE8 en 1024. Et non je ne vais pas agrandir ma fenêtre pour toi; et non mon admin sys ne va pas m'autoriser à utiliser un autre navigateur...

L'absence de scroll "natif" dans les frame est super dérangeant. ON est au 21ème siècle, on je clique plus sur l'assenceur pour le faire défiller ! (mais bon au moins dans la frame il y a un assenceur...).


ps. : mucho, ce qu'il y a de mal avec les iframe, c'est leur mauvaise utilisation, un peu comme pour les tableaux...

loddesign a écrit :


jmlapam
- Le site est bien en utf-8, tout html5/css3 au passage, je n'ai pas trop compris l'exemple avec les caractères spéciaux.

a écrit :
Cr&eacute;ation graphique, int&eacute;gration et d&eacute;veloppement Magento, gestion module de r&eacute;servation, gestion projet

L'UTF-8 sert à ne pas se préoccuper de passer tous les accents avec ceci.

loddesign a écrit :
- il s'agit d'un mail professionnel, pour moi c'est que question d'accessibilité si tu vas sur les sites du w3c par-exemple les mails ne sont pas encodés

Ah bon, en quoi c'est plus accessible ? Faut accepter de se faire spammer pour être accessible, je n'en suis pas si sûr, mais je veux bien te croire.

loddesign a écrit :
- pas de responsive ou d'adaptive design,
&gt; Bon là si tu regardes on est bien dans un &quot;adaptive design&quot; faut pas pousser hé hé en fait c'est un peu le but! déjà avec le gestion de la hauteur en pourcentage (sans js), il y a aussi un container avec un min-width de 1000px et le menu des images a un max-height de 1360px pour ne pas les déformer. Le reste s'adapte justement pour la fluidité et prendre tout l'espace du navigateur. Donc pour avoir testé sur ma tablette pas de pb à ce niveau bien au contraire!

C'est pas en testant sur une seule tablette donc une seule résolution que ton site est adapté. J'ai d'alleurs testé avec un matériel ultra-courant : un petit Notebook à 1024px. Ce n'est pas adapté.


Modifié par jmlapam (06 Aug 2012 - 13:49)

Bonjour,

Laurie-Anne
Merci en tout cas d'avoir testé sous ie8 pour moi, hé hé j'ai fait ça ce we je n'avais pas encore optimisé mais je vais garder l'idée dc c'est chose réparée (j'ai déclaré mes balises en html5 pour ie)

Alors l'abscence de "scroll natif" s'explique par le fait que le site s'ajuste en hauteur dc pas de scroll à moins que la hauteur soit vraiment basse (on a des min-height sur la partie du haut). Tout ça pour ne pas avoir un double scroll avec les iframes qui elles ont une hauteur limitée et éviter d'avoir tout le site qui s'affiche. Je veux garder un esprit galerie/aperçu en profitant d'un petit effet panoramique.


jmlapam
> ok j'ai encodé en utf8, c'est vrai que c'est sale habitude de mettre les caractères spéciaux
> pour l'encodage du mail je me suis déjà posée la question c'est pour ça que j'avais maté sur le site du W3C comment il gérait ça. Pas de formulaire de contact, pas d'encodage je pense c'est une question de transparence même pour les moteurs pour que le mail soit visible sur la toile, c'est un mail réservé (pas mon adresse perso) et ma messagerie prend en charge les spams..
> réparée ça s'adapte bien en 1024 un ptit bug avec le slideshow j'ai forcé le width. Je pourrai baisser le min-width un peu plus mais vu que ça reste une présentation de réalisations plus ou moins récentes qui sont adaptés en 1024 je garde ça comme limite. Ca reste une page un peu fun pour archiver les réalisations, les projets actuels sur lesquels je bosse sont tournés html5/css3, une bonne fluidité sur tous les formats.. Les contraintes de notre métier ont beaucoup changé c'est très agréable d'utiliser pleinement la css3, on s'éloigne des conflits liés aux versions de ie, ça fait plaiz!
Modifié par loddesign (06 Aug 2012 - 21:36)

Essaye d'inclure les pages avec de l'ajax au lieu des frames (Je crois que c'est possible, mais j'ai peur de dire une bêtise)
Modifié par doc mcfly (07 Aug 2012 - 13:42)

pourquoi ne pas utiliser les iframes et inclure les sites avec de l'ajax? c'est aussi un petit jeu pour démontrer qu'il n'y a pas de mauvaises balises du moment qu'on les utilisent pour ce qu'elle sont.

Je suis tombée sur un article entre-temps :

a écrit :
La balise iFRAME [...] est utilisée afin d'insérer dans une page HTML un autre document HTML.

Il est important de souligner la différence qui existe entre les balises FRAME et iFRAME :

- la balise FRAME est utilisée afin de diviser une page HTML en différentes pages organisées de manière logique. Ces pages sont toutes stockées sur le même serveur ; (> les fameuses frames dépréciées)

- la balise iFRAME est, quant à elle, utilisée afin d'afficher au sein d'une même page des informations stockées sur des serveurs différents. Elle est, par exemple, souvent utilisée afin d'insérer des bandeaux publicitaires hébergés sur des serveurs dédiés.

Source

je vais ajouter un texte alternatif dans les iframes dans le cas où le navigateur ne peut pas les afficher. On apprend au passage une autre mauvaise utilisation, certains dissimulent des iframes dans des sites pour forcer la connexion de l'internaute vers un autre site..
Modifié par loddesign (07 Aug 2012 - 20:40)

jmlapam a écrit :


Ah bon, en quoi c'est plus accessible ? Faut accepter de se faire spammer pour être accessible, je n'en suis pas si sûr, mais je veux bien te croire.

Il y a quand même un peu une question d'accessibilité cognitive je trouve.

Un peu le même problème que pour la question du format international des numéros de téléphone:

+33 (0)6 etc...

Après réflexion sur le dernier sujet j'en suis venu à opter pour:

06 etc... (international: +336 etc...)


On croit facilement qu'il y a des pratiques qu'il faut adopter, ce n'est pas si simple.
Modifié par 4/3 (08 Aug 2012 - 15:34)

4/3 a écrit :
d'accessibilité cognitive

C'est quoi?
Modifié par jmlapam (08 Aug 2012 - 17:52)

Une accessibilité qui répond aux besoins de troubles cognitifs plus ou moins sérieux (trouble du langage, handicap mental, handicap psychique, ... la liste est longue). Donc une ergonomie simple, un contenu facilement accessible et clair. Pour l'exemple je me souviens d'un vieux DVD de Tool (si vous connaissez pas c'est un bon groupe de musique avec des clips remarquables) où il s'amusait à cacher les menus façon labyrinthe. C'était sympa très expérimental mais galère pour s'y retrouver, sur un site qu'on veut accessible on va éviter de faire trop appel à l'esprit de déduction de l'internaute et au contraire lui simplifier la tache pour que ce soit le plus naturel possible. ça peut-être juste ajouter un texte clair pour présenter une action (Merci de remplir le formulaire et d'appuyer sur le bouton validé). ça parait évident mais pour certaines personnes c'est utile de les accompagner;

> ou dans notre exemple mettre clairement le mail pour pas avoir de surprise quand on copie/colle ?
Modifié par loddesign (08 Aug 2012 - 18:38)

Euh… Ce que veulent dire mes camarades, c'est qu'un mail en clair dans une page (c'est-à-dire dans le champ de la balise <a> comme dans le href) est un très bon moyen de se faire spammer. Donc :

1. Soit les mails de contact sont générés en Javascript (je n'y connais rien, mais je crois que c'est l'idéal).

2. Soit vous pouvez utiliser des images, ou même CSS (mais css ne me semble pas le top pour l'accessibilité).

3. Ou ma technique : j'utilise Markdown pour chiffrer mes mails. Pour le texte de la balise <a>, je mets "adresse (at) mondomaine (point) com" ou bien n'importe quoi… De toute façon, un clic droit sur le lien, et on peut copier/coller une adresse mail

PS: En fait, un formulaire de contact, ce serait aussi très bien !
PPS : Vous avez aussi mis votre 06 dans la page ? oO
Modifié par Muchos (12 Aug 2012 - 20:35)

Je crois que c'est une question de point de vue, si on prend d'un côté des puristes comme le W3C y'a pas de protection anti-spam. Prends par-exemple la liste des membres http://www.w3.org/People si tu cliques sur n'importe quel membre tu as simplement son mail + mailto. C'est pas un oubli ou que les mecs avaient le flemme de mettre un bout de code Javascript, c'est forcément un choix. Je ne trouve pas de documentations officielles mais ça semble logique qu'un contact doit être mis en avant et facilement joignable (c'est aussi ça l'accessibilité), quand on publie un contact est ce que notre fonction est de lutter contre le spam? Si un client rencontre des problèmes de spam je pense qu'on l'orientera vers une solution sur sa messagerie et sa machine, l'encodage du mail sur son site c'est vraiment anecdotique quand on réfléchit bien.

En fait je n'ai pas de raisons de cacher mon mail ou mon portable qui sont mes contacts pro et que je veux visible.

> Les solutions en javascript(exemple http://lombre.net/tests/microformats/) ou Markdown (je ne connaissais pas c'est intéressant - et un peu déroutant - cette idée de simplifier le formatage du texte en évitant les balises..) ça peut être contourner, après on peut partir du principe que c'est mieux que rien
> l'image à bannir ds le genre pas accessible et pénible,
> perso ça me saoule de tomber sur des formulaires et pire de pas avoir de contact (le minimum aussi c'est d'envoyer une copie du mail à l'auteur), mais clairement l'accessibilité c'est aussi de permette à l'internaute d'utiliser ses paramètres. Chacun a ses habitudes pour l'envoi de mail du moment qu'on a l'adresse! Pour moi les formulaires c'est un bon outil marketing pour cibler la demande et recup d'autres infos
Modifié par loddesign (12 Aug 2012 - 23:53)

loddesign a écrit :
C'est pas un oubli ou que les mecs avaient le flemme de mettre un bout de code Javascript, c'est forcément un choix.

De l'éthique du mailto, w3c éditions, 2012, 328p.

Blague à part, je ne pense pas que laisser son mail en clair soit une bonne idée, et l'accessibilité n'a rien à voir ici. Peut-être que d'autres viendront me contredire…

Je précise que les mails des membres du w3c sont encodés, alors que l'arobase fait partie des caractères ASCII. Ex. avec le mail à Timo (ça fait bien dans son carnet de contact) :

<a href="mailto:timbl&#x40;w3.org">timbl&#x40;w3.org</a>

Pour reprendre ton exemple sur la page de Tim Berners-Lee http://www.w3.org/People/Berners-Lee/ on a 2 sortes d'écriture de mail :
"timbl @ w3.org" et "<a href="mailto:w3t-pr@w3.org">w3t-pr@w3.org</a>".
On peut pas parler d'encodage non, en gros il met en avant les autres mails (via un "mailto") et les pages de FAQ plutôt que son contact (je pense le concernant pour filtrer les demandes plutôt que les spams), et donne de larges recos pour ne pas se faire spammer... ça rejoint le fait qu'une messagerie filtre les spams et que l'emploi du mailto est adapté c'est son rôle. La partie anti-spam c'est anecdotique honnêtement comparé au fait qu'on doit privilégier l'accessibilité..