BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> Tutoriaux utilisateurs
  Nouveaux messages Nouveaux messages Fil RSS  - [Tuto] les mediaqueries d'OE
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

Sujet fermé[Tuto] les mediaqueries d'OE

 Répondre Répondre
Auteur
Message
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Lien Direct à ce Post Sujet: [Tuto] les mediaqueries d'OE
    Envoyé : 21 Mar 2016 à 10:50
Première partie du tutoriel : création d'un menu sur un calque en responsive.


Première chose à comprendre, pour tous les débutants et confirmés. Le responsive dans OE a été introduit sur les dernières bétas et fonctionnent plutôt correctement (même s'il reste quelques petites choses à ajouter comme vous le verrez au fur et à mesure dans ce premier tuto).

Une chose importante à savoir et à faire impérativement pour bien comprendre la suite. Il vous faudra installer soit Chrome soit Firefox.
Pourquoi? Tout simplement parce qu'OE ne dispose pas (encore) d'un mode d'affichage dédié aux différents formats des navigateurs selon les supports (desktop, tablettes et mobiles).
De ce fait donc, il est impératif d'avoir un de ces deux navigateurs pour bien se rendre compte sur quoi l'on travaille.

Pour mon tutoriel, je vais partir sur Chrome. Pour certains "puristes" qui pourraient diaboliser ce navigateur (j'en connais sur le forum...), c'est uniquement parce que par rapport à Firefox, celui-ci permet en plus du choix des résolutions de spécifier le type d'appareil souhaité pour la résolution.

Pour les "nouveaux" sur le forum, en quoi consiste le responsive (le vrai terme est Responsive Web Design) ?
C'est une technique de réalisation de site web, qui peemet de faire les sites qui s'adaptent automatiquement à l'espace disponible sur l'écran.
On se base donc en général sur la largeur de l'écran pour déterminer comment les éléments du site 
doivent s'afficher.

Une fois que vous aurez compris ça, la suite va commencer à devenir intéressante.

OE intègre maintenant des outils spécifique pour les gérer le responsive.
Quand vous mettez un élément sur une page ou un calque, vous pouvez accéder à un large choix de modifications en allant sur le menu de droite, onglet Styles et Personnalisation.



Pour vous familiariser avec les media queries d'OE, sur l'mage au dessus, vous pouvez voir la ligne Média.
Elle est avec Média par défaut.
Voici les différents médias intégrés dans OE (vous pouvez les voir en cliquant sur le menu déroulant.


- Média par défaut
- Tablettes, smartphones, petits bureaux
- Certaines tablettes (portrait), smartphones
- Smartphones (portrait)

Sur la droite du menu déroulant, vous avez un icone de type "bloc notes". Cliquez dessus et vous pourrez voir les résolutions de chaque média queries.

Tablettes, smartphones, petits bureaux


Comme vous pouvez le voir, le code définie une largeur maximum d'écran de 1199px (pixels).
Autrement dit, tout ce qui est dans une largeur de 1199 pixels héritera de fonctions autre que celle du media par défaut. C'est la base même des média queries. Si vous ne comprenez pas cette partie là, ce n'est pas la peine d'aller plus loin. Il vous faut impérativement l’assimiler!!

Les autres media queries :




Maintenant que vous avez vu l'ensemble des média queries disponibles, il va nous falloir commencer à travailler sur le menu de notre site web.

(PS : je sauvegarde maintenant cette partie et je continue le tutoriel Wink )

Un exemple suit sur l'autre page, pour que la première partie soit pleinement comprise.


Edité par Hobby001 - 07 Mai 2019 à 22:06
Haut de la page
Bridet allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 13 Dec 2013
Pays: Condroz
Status: Inactif
Points: 5049
Lien Direct à ce Post Envoyé : 21 Mar 2016 à 11:14
"Comme vous pouvez le voir, le code définiT une largeur maximum d'écran de 1199px (pixels).
Autrement dit, tout ce qui est dans une largeur de 1199 pixels héritera de fonctions autre que celleS du media par défaut. C'est la base même des média queries. Si vous ne comprenez pas cette partie là, ce n'est pas la peine d'aller plus loin. Il vous faut impérativement l’assimiler!!"

Bon, ben j'ai du mal ...
Dois-je comprendre que le média par défaut est un grand écran et qu'il faut rajouter les autres supports ou c'est juste pour signaler tout ce que ça inclut? Ou exactement l'inverse?

"dans" une largeur de 1199 pixels : tu veux dire inférieure ou égale?

Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Lien Direct à ce Post Envoyé : 21 Mar 2016 à 11:28
c'est pourtant "clair" Bridet Big smile, c'est la largeur MAXIMALE de la résolution de ton écran.
Par défaut, si tu ne touches à rien, quelque soit ta résolution d'écran, tes éléments seront tels que tu les as mis et auront les mêmes fonctions (taille de font, couleur, position, hauteur, etc).
Ces media queries permettent donc de spécifier d'autres règles.
En l’occurrence, pour la première, tout ce que tu changera avec ce media querie sera pris en compte sur sur une résolution d'écran maximum de 1199 pxiels. Au dela, c'est le média par défaut.

un test simple serait possible pour t'expliquer mieux encore mais tu sabotes le tutoriel du coup...Cry
Après réflexion, il me semble effectivement primordial d’éclaircir ce point. Sans une base saine pour tous, beaucoup risque de ne pas pouvoir comprendre la suite.


Edité par brolysan - 21 Mar 2016 à 12:19
Haut de la page
Bridet allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 13 Dec 2013
Pays: Condroz
Status: Inactif
Points: 5049
Lien Direct à ce Post Envoyé : 21 Mar 2016 à 11:40
Donc, il faut rajouter un média si on veut que le comportement change pour les très grands écrans (>1199) ?
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Lien Direct à ce Post Envoyé : 21 Mar 2016 à 11:47
Pour ceux qui ne comprennent pas cette première partie, nous allons faire un exemple "simple" et précis.
La suite du tutoriel sera donc décalé (remerciez Bridet Hug mais nécessaire je pense, tu as raison sur ce point si personne ne comprend la base).

Mettez un élément texte simple ligne.
Mettez lui comme font (police) l'arial
Mettez lui une taille css de 15 pixels



Maintenant, allez dans le menu de droite (Styles) puis personnalisation
Comme vous pouvez le voir,  on retrouve toutes les informations de l'élément.



Changez maintenant le Media par défaut par celui de Tablettes, smartphones, petites tablettes.
Vous verrez que les informations ont disparus.
Malgré tout, cet élément hérite du média par défaut.

Nous allons modifier la taille de la font (police).
Cherchez la partie Texte.
Mettez une taille de 10 pixels.



Pour éviter TOUTE ERREUR PAR LA SUITE, une fois cette modification, pensez à revenir au média par défaut. Sinon, OE garde le dernier média sur les autres éléments.

Une fois revenu à media par défaut, sauvegarde et prévisualisez votre page.
Et jouez sur la largeur de votre navigateur.

Taille de navigateur supérieur à 1199 px de large



Taille de navigateur inférieur ou égale à 1199 px



Clap


Voilà la base des media queries d'OE !!!


Edité par brolysan - 21 Mar 2016 à 12:13
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Lien Direct à ce Post Envoyé : 21 Mar 2016 à 11:49
Message posté par Bridet Bridet a écrit:

Donc, il faut rajouter un média si on veut que le comportement change pour les très grands écrans (>1199) ?

Si tu poses tes questions avant que j'ai fini le tutoriel, et si j'y réponds, le tutoriel ne servira à rien et viendra "perturber" tous les nouveaux et même anciens. Wink
Mais sinon, c'est le contraire, c'est pour les tailles inférieures à 1199 pixels.

Patience tu devras aquérir jeune padawan. 

Mais c'est vrai que si cette première base n'est pas acquise et comprise, cela ne servira a rien d'aller plus loin.
Ceux ayant des questions et autres, posez les, je continuerai le tutoriel plus tard. L'essentiel est de comprendre cette base et d'être capable de comprendre la suite.


Edité par brolysan - 21 Mar 2016 à 12:00
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group


Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5388
Lien Direct à ce Post Envoyé : 21 Mar 2016 à 13:54
Attention néanmoins, la remarque de Bridet est pertinente, car les medias queries OE ne sont définies (sauf erreur de ma part, mais tel que présenté dans l'interface) QUE par un max-width. elles sont donc superposables, contrairement à des media queries plus classique, qu'on borne également par un min-width.

Par ailleurs, attention également, elle sont screen only, donc elles ne s'appliqueront pas si on projette un site sur un VP (@media tv ou @media projection), ou pour impression (@media print).

Dans OE, quand une des conditions des MQ n'est pas remplie, ce seront dont l'aspect "Media par défaut" qui s'appliquera. Nuance !




Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Lien Direct à ce Post Envoyé : 21 Mar 2016 à 14:07
Message posté par Larsene Larsene a écrit:

Attention néanmoins, la remarque de Bridet est pertinente, car les medias queries OE ne sont définies (sauf erreur de ma part, mais tel que présenté dans l'interface) QUE par un max-width. elles sont donc superposables, contrairement à des media queries plus classique, qu'on borne également par un min-width.

Par ailleurs, attention également, elle sont screen only, donc elles ne s'appliqueront pas si on projette un site sur un VP (@media tv ou @media projection), ou pour impression (@media print).

Dans OE, quand une des conditions des MQ n'est pas remplie, ce seront dont l'aspect "Media par défaut" qui s'appliquera. Nuance !

cela mérite un peu plus d'information pour cette "information".
oui, pour projeter un sur sur VP (mais combien s'en serve...j'en connais aucun pour ma part). Mais "utile" de le préciser même si je pense que cela ne fait QUE rajouter au floue de l'utilisation des media queries d'OE.
Dans OE par contre, si l'on modifie un des media queries (en l’occurrence le premier donc comme mon exemple), celui ci prend le pas sur l'ensemble deux autres : Certaines tablettes (portrait), smartphones
et Smartphones (portrait). Cela est valable aussi pour les autres. C'était un point que j'allais expliquer de toute façon...

C'est à dire sur mon exemple, quelque soit ma résolution d'écran ou mon support, la taille de la font restera à 10 pixels sur un smartphone ou une tablette.
Si effectivement j'ai oublié un élément dans la conception de mon projet et de spécifier les média queries, celui gardera le média par défaut.
M'avoir coupé dans le tuto pour le menu n'aura fait qu'au final foutre "la merde" dans l'explication des média queries d'OE. Embarrassed



Edité par brolysan - 21 Mar 2016 à 14:22
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group


Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5388
Lien Direct à ce Post Envoyé : 21 Mar 2016 à 15:46
Message posté par brolysan brolysan a écrit:

oui, pour projeter un sur sur VP (mais combien s'en serve...j'en connais aucun pour ma part). Mais "utile" de le préciser même si je pense que cela ne fait QUE rajouter au floue de l'utilisation des media queries d'OE.


Je réalise un site. Responsive qui plus est. Je le présente sur un VP à mon client ...

Message posté par brolysan brolysan a écrit:

Dans OE par contre, si l'on modifie un des media queries (en l’occurrence le premier donc comme mon exemple), celui ci prend le pas sur l'ensemble deux autres : Certaines tablettes (portrait), smartphones
et Smartphones (portrait). Cela est valable aussi pour les autres. C'était un point que j'allais expliquer de toute façon...


Elles se superposent, la plus petite valeur étant la plus forte car plus restrictive.

Message posté par brolysan brolysan a écrit:

C'est à dire sur mon exemple, quelque soit ma résolution d'écran ou mon support, la taille de la font restera à 10 pixels sur un smartphone ou une tablette.


Non c'est faux. Sur ma nexus 10, il reste à 15px (problème de résolution)

Message posté par brolysan brolysan a écrit:

Si effectivement j'ai oublié un élément dans la conception de mon projet et de spécifier les média queries, celui gardera le média par défaut.


Non, si mon périphérique ne répond pas aux médias queries, ce sera le style par défaut (donc usage de TV, Projecteur, MiraCast, impression etc.) Mais ce n'est en principe pas trop grave...

J'en ai fait la désagréable expérience, moi qui me croyais blindé ... Confused

Message posté par brolysan brolysan a écrit:

M'avoir coupé dans le tuto pour le menu n'aura fait qu'au final foutre "la merde" dans l'explication des média queries d'OE. Embarrassed


Désolé Cry... Fais donc ton tuto dans un fil "propre" avec un tuto complet ou efface complètement nos remarques de TON fil de discussion ;-)

Haut de la page
 Répondre Répondre
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.125 secondes.