Edition Responsive Web Design, l'importance capitale des blocs de positionnement

---

---

---

http://blogs.pcsoft.fr/blogs.awp

---

---

[Billet publié dans le blog Le blog du ST] A partir de la version "Update 3" de WEBDEV 21, l'éditeur de pages lorsque l'édition est faite en mode Responsive Web Design, permet de visualiser les blocs de positionnement des champs. Pour afficher les blocs de positionnement, sous le volet "Affichage", dans le groupe "Aide à l'édition", cliquez sur "Bloc de positionnement". Il est très important de toujours conserver l'option active, afin de visualiser les blocs de positionnement, et les positions des champs les uns par rapport aux autres. Rappelons en effet que le principe d'une page Responsive Web Design, et d'avoir ses champs qui vont se positionner les uns par rapport aux autres en fonction de la taille du navigateur, des règles définies via les ancrages et la grille de positionnement. Dans la page illustrée ci-dessous, grâce à l'activation de la visualisation des blocs de positionnement, on voit pour le champ sélectionné : le rectangle pointillé dans lequel l'éditeur regroupe les champs (le bloc de positionnement),  à droite de quel élément sera placé le champ : ici l'image sera toujours et dans tous les tranches alignée sur le bord gauche de la page,  en dessous de quel élément sera placé le champ : ici l'image sera toujours placée sous le libellé "Connexion" de la page. Attention, "au dessous" ici doit être pris au sens de la verticalité dans la page, pas de la superposition. Ces informations sont très importantes, car la position des champs les uns par rapport aux autres est figée dans toutes les tranches : dans la tranche bureau, la tranche de référence, l'image est placée dans la page en appliquant ses ancrages et en fonction du libellé "Connexion". Dans toutes les tranches, l'image sera placée en fonction de la position du libellé "Connexion". On sait donc grâce à la visualisation des blocs de positionnement : de quoi dépend la position d'un champ,  où un champ ne pourra pas être placé dans la tranche tablette, ou la tranche mobile. Les erreurs d'IHM mentionnent les éventuelles erreurs de positionnement. Astuce : l'ordre des champs les uns par rapport aux autres est figé dans toutes les tranches. Par contre, la visibilité des champs ainsi que leurs positions peuvent être surchargés. Dans un exemple comme ci-dessus, si l'on souhaite avoir dans une tranche un champ qui ne conserve pas sa position de référence définie par la tranche bureau, on peut utiliser deux champs et jouer sur leurs visibilités. Exemple pour avoir dans la tranche mobile une image placée avant le libellé "Connexion", alors qu'elle est après dans la tranche bureau : l'image placée sous le libellé "Connexion" est rendue invisible dans la tranche mobile : dans la tranche mobile, l'image créée spécifiquement pour cette tranche est rendue visible, l'inverse de l'image utilisée dans la tranche bureau.

---

---

Edição RWD, a crítica importância de blocos de posicionamento Publicado por Guillaume BAYLE 17:58 sexta-feira 17 de junho de 2016 [Ticket publicada no blog O blog ST ] A partir da versão "Update 3" de Webdev 21, o editor de páginas durante a edição é feita em forma de web design responsivo , permite visualizar os blocos de posicionamento do campo. Para visualizar os blocos de posicionamento, sob o painel "View", no grupo "Suporte Publishing", clique em "bloco de posicionamento." É muito importante sempre manter o produto activo, de forma a visualizar os blocos de posicionamento e as posições dos campos em relação ao outro. Recordemos que o princípio da página Web Design Responsive, e para ter seus campos que irá posicionar em relação ao outro, dependendo do tamanho do navegador, as regras definidas através das âncoras ea grade de  posição. Na página ilustrado abaixo, através da activação da visualização de blocos de posicionamento, que se observa para o campo seleccionado: o retângulo pontilhado em que o editor inclui os campos (a unidade de posicionamento),  direito de qualquer item será colocado imediatamente: aqui a imagem será sempre e em todas as fatias alinhados à margem esquerda da página,  abaixo do qual item será colocado imediatamente: aqui a imagem será sempre sob a página de texto "Connection". Atenção "abaixo" aqui deve ser tomado na acepção da verticalidade na página, e não a sobreposição. Esta informação é muito importante, porque a posição dos campos de cada outra é congelada em todos os segmentos: na fatia de escritório, fatia de referência, a imagem é colocada na página usando as suas fixações e dependendo do formulação "login". Em todos os segmentos, a imagem será colocada em função da posição do rótulo de "Conexão". Então, nós sabemos através da visualização dos blocos de posicionamento: O que determina a posição de um campo,  onde um campo não pode ser colocado na fatia de comprimido, fatia ou móvel. Os erros GUI mencionar quaisquer erros de posicionamento. Dica  : A ordem dos campos do outro está congelada em todas as fatias. Para os contras, a visibilidade dos campos e suas posições podem ser sobrecarregados. Em um exemplo como acima, se desejado em uma fatia de um campo que não mantém a sua posição de referência definido pelo escritório fatia, podemos usar dois campos e jogar em suas visibilidades. Por exemplo, na fatia móvel de uma imagem colocada antes da expressão "Connection", como ela está no escritório após a prestação: a imagem com o texto "Connection" é tornada invisível na fase móvel: na fatia móvel, a imagem criada especificamente para esta parcela é feita visível, o oposto da imagem usada na fatia escritório.

---

---

---

---

---

---

---

---

---