Postado por
Robson Oliveira
em
- Gerar link
- Outros aplicativos
Tarefa: discutir os aspectos matemáticos envolvidos na criação e
no uso de um adaptive logo, à sua escolha, destacando o
emprego da programação para a viabilização do mesmo.
Cada vez mais usuários utilizam como meio de acesso a internet os dispositivos móveis como smartphones e tablets. Atualmente, o número de usuários acessando sites mobile na internet é maior do que os usuários que acessam pelo desktop. Cerca de 45% da população brasileira tem acesso a internet. [1]
Dado o volume considerável de usuários acessando a internet por meio de dispositivos móveis, foi necessário a transformação ou readequação da interface de acordo com o dispositivos usados, precisamente a largura da tela. Esse conceito é entendido na programação web como Responsividade. No web design, ela é responsável por adaptar a largura dos elementos HTML presentes em um site. Este site pode ser desenvolvido exclusivamente em versão mobile, ou seja, específico para dispositivos móveis, ou em desktop, porém responsivo, determinante para a adaptação do site em outros dispositivos.
A partir deste ponto de vista, procurei entender melhor como uma logo pode ser adaptada de acordo com o dispositivo que o usuário está utilizando.
Para entender melhor essa lógica, devemos levar em consideração um fator determinante, a largura. Para que a responsividade ocorra, é necessário compreender o comportamento de um elemento em relação a largura total da tela, que são geralmente divididos em píxels, px. A altura não é considerada pois caso um elemento HTML muito largo exceda o limite da tela, ele é adaptado tendo sua altura aumentada e largura diminuída.
No CSS, a largura total do elemento pode ser aplicada tanto em píxels (px), quanto em porcentagem (%). Por exemplo, se eu desejasse que um texto ocupasse boa parte da largura da tela, mas tivesse um espaço em branco entre os dois limites horizontais, eu diria que o elemento deveria ocupar apenas 80% da tela, na posição central.
@media screen and (max-width:680px) {
.texto {
width: 80%;
margin: 0 auto;
padding: 10px 0;
}
}
Exemplo de um elemento centralizado na tela de um dispositivo cuja largura máxima é 680 píxels.
Adaptative logo escolhida:
Binder PRO é um tema em Wordpress para revistas, blogs e sites editoriais. Sua logo se adapta a qualquer largura. Foram desenhados três versões diferentes para serem usadas.
Considerando a ampliação de tecnologias e a seguinte frase: "Não me faça pensar" conhecida no meio web como base para o design de qualquer layout, é certo que a cada dia, novas formas de pensar a adaptação de uma logo ou um site serão desenvolvidas, cabendo ao programador se adaptar as mudanças que ocorrerão no futuro.
Cada vez mais usuários utilizam como meio de acesso a internet os dispositivos móveis como smartphones e tablets. Atualmente, o número de usuários acessando sites mobile na internet é maior do que os usuários que acessam pelo desktop. Cerca de 45% da população brasileira tem acesso a internet. [1]
Dado o volume considerável de usuários acessando a internet por meio de dispositivos móveis, foi necessário a transformação ou readequação da interface de acordo com o dispositivos usados, precisamente a largura da tela. Esse conceito é entendido na programação web como Responsividade. No web design, ela é responsável por adaptar a largura dos elementos HTML presentes em um site. Este site pode ser desenvolvido exclusivamente em versão mobile, ou seja, específico para dispositivos móveis, ou em desktop, porém responsivo, determinante para a adaptação do site em outros dispositivos.
A partir deste ponto de vista, procurei entender melhor como uma logo pode ser adaptada de acordo com o dispositivo que o usuário está utilizando.
 |
| Exemplo do blog no modo responsivo. |
Para entender melhor essa lógica, devemos levar em consideração um fator determinante, a largura. Para que a responsividade ocorra, é necessário compreender o comportamento de um elemento em relação a largura total da tela, que são geralmente divididos em píxels, px. A altura não é considerada pois caso um elemento HTML muito largo exceda o limite da tela, ele é adaptado tendo sua altura aumentada e largura diminuída.
No CSS, a largura total do elemento pode ser aplicada tanto em píxels (px), quanto em porcentagem (%). Por exemplo, se eu desejasse que um texto ocupasse boa parte da largura da tela, mas tivesse um espaço em branco entre os dois limites horizontais, eu diria que o elemento deveria ocupar apenas 80% da tela, na posição central.
@media screen and (max-width:680px) {
.texto {
width: 80%;
margin: 0 auto;
padding: 10px 0;
}
}
Exemplo de um elemento centralizado na tela de um dispositivo cuja largura máxima é 680 píxels.
Adaptative logo escolhida:
Binder PRO é um tema em Wordpress para revistas, blogs e sites editoriais. Sua logo se adapta a qualquer largura. Foram desenhados três versões diferentes para serem usadas.
 |
| Adaptação final da logo baseada na largura da tela de cada dispositivo. |
Considerando a ampliação de tecnologias e a seguinte frase: "Não me faça pensar" conhecida no meio web como base para o design de qualquer layout, é certo que a cada dia, novas formas de pensar a adaptação de uma logo ou um site serão desenvolvidas, cabendo ao programador se adaptar as mudanças que ocorrerão no futuro.
Comentários
Postar um comentário