Implementação do Menu Responsivo
Menu Responsivo
Menus
Este artigo é a terceira parte do tutorial sobre Web Design com Flex Box Model.
Organização dos Arquivos
Antes de prosseguirmos, temos que tratar de alguns pontos fundamentais à publicação de nossa página na Internet. Existe uma estrutura de arquivos que deve ser respeitada desde o desenvolvimento, de forma a facilitar o upload para o servidor.
O primeiro passo para isso é ter instalado em seu computador um servidor local, como mencionado no primeiro artigo desta série ao nos referirmos ao XAMPP. Existem vários tutoriais na Internet que mostram como fazer isso e nossa recomendação é para que siga o tutorial do canal do youtube, ‘Curso em Vídeo’, acessível a partir deste link. Assista o vídeo até o fim antes de inciar a instalação, tirando todas as dúvidas que possam surgir.
Instalado o XAMPP, teremos os diretórios:
- Linux
- - /var/www/html
- Windows
- - C:\xampp\htdocs\
Acesse esse diretório e crie a seguinte estrutura de arquivos:
Notas:
1. Não utilize espaços entre os nomes das pastas. O servidor Apache é baseado em Linux e mesmo utilizando o Windows, a existência de espaços nos nomes, impedirá o acesso aos arquivos.
2. A diferenciação entre maiúsculas e minúsculas é importante.
Grave o arquivo webLayout_00102.html na pasta htm e o arquivo style_00102 na pasta _css:
Nota:
Utilize esses mesmos locais para gravar os arquivos HTML e CSS das próximas sessões.
Fontes Awesome
Conforme definimos no capítulo anterior, criaremos três estruturas de visualização para esse site:
Break-point # | Início px | Fim px |
---|---|---|
#1 | 320 | 480 inclusive |
#2 | 481 | 768 inclusive |
#3 | 769 | W máximo |
Reprodução da Tabela I - Break-points na largura das telas
Essas estruturas podem ser esquematizada conforme a figura 2:
Nota:
No site original, da W3schools, a resolução intermediária da tela acomoda três colunas, tornando a leitura impraticável, deste modo optamos por manter apenas uma coluna nas resoluções baixa e média e três colunas somente na resolução máxima. Nenhum dos layouts mostrou-se adequado à exibição de duas colunas.
Onde temos:
- Tipo hambúrguer para larguras de tela com até 480px;
- Com botões em forma de ícones para larguras de tela entre 480px e 768px;
- Com botões contendo texto, para larguras de tela acima de 768px.
Utilizaremos ícones no Logo e mais enfaticamente nos menus tipo hambúrguer e intermediário. Você pode criar facilmente seus ícones em programas como o Inkscape como também pode utilizar as inúmeras coleções disponíveis na Internet. Dentre essas coleções, uma se destaca pela popularidade e pela gratuidade, as fontes Awesome Solid. Veremos a seguir como integrar esses ícones em nossa página web.
Fonte Awesome – Integração à página Web
Existe mais do que uma forma acessar os ícones da fonte Awesome em uma página web. A forma que utilizaremos neste desenvolvimento consiste em incorporar esta fonte diretamente ao nosso sistema de arquivos.
Siga os seguintes passos:
- Acesse o site fonteawesome.io
- Localize a palavra “Download”. Fica logo abaixo do botão “Get More with Pro”
- Na janela que surge em seguida, clique em ‘Free for Web’:
- Salve o arquivo e descompacte em um local a sua escolha
- Salve o arquivo descompactado na pasta _font
- Abra o Visual Studio Editor (VSE) e selecione “Open Folder”. Selecione a seguir a pasta “LayOut”. Com isso toda a estrutura de arquivos será exibida na janela esquerda do editor:
- Dê duplo clique no arquivo ‘webLayout_00102.html’ para que fique ativo na janela do VSE.
- Clique em ‘File’ > ‘Salvar como’ e nomeie como webLayout_00103.html.
- Dê duplo clique no arquivo ‘style_00102.css’ para que fique ativo na janela do VSE.
- Clique em ‘File’ > ‘Salvar como’ e nomeie como style_00103.css.
- No VSE, no arquivo webLayout_00103.html, altere a linha 11:
- de: link rel="stylesheet" href="../../_css/style_00102.css"
- para: link rel="stylesheet" href="../../_css/style_00103.css"
- Altere o título, na linha 12:
- de: ”FlexBox Model for Social Media – Parte 2”
- para: ”FlexBox Model for Social Media – Parte 3”
De agora em diante, nesta seção, utilizaremos apenas os arquivos com a identificação 00103 em seu nome. Iremos nos referir aos mesmos, de forma genérica, como arquivos de trabalho.
O diretório nesta etapa, deve estar conforme esquema:
Inserido o arquivo, temos que informar o seu caminho na página HTML. Considerando o esquema de arquivos mostrado na figura, altere o código no arquivo ‘webLayout_00103.html’ conforme segue:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../../_css/style_00103.css">
<link rel="stylesheet"
href="../_font/fontawesome-free-5.12.1-web/css/all.css">
<title>FlexBox Model for Social Media - Parte 3</title>
>/head<
Fontes Google
Nos primórdios da internet quando especificávamos uma fonte pelo seu nome, mas, se o usuário não a tivesse instalado, o navegador é quem decidia qual utilizar. Nos dias atuais não precisamos mais ser dependentes das fontes instaladas, basta especificarmos um servidor de origem de uma ‘web-font’ que o navegador irá baixá-la e aplicá-la ao texto de sua página, tornando seu site mais homogêneo entre dispositivos, sistemas e navegadores.
Um dos servidores de fontes mais populares atualmente é o Google Fonts, acessível através deste link. Se desejar, faça uma visita ao site e verifique os mais variados estilos que poderá utilizar em suas páginas, totalmente gratuitos.
Para incluir web-fonts em nosso site, temos que fazer duas alterações nos arquivos:
- No HTML: incluir o link para a origem e nome da fonte;/li>
- No CSS : incluir a família da fonte que utilizaremos associada às classes CSS.
Veja os exemplos a seguir:
Roboto:
HTML:
<link href="https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet">
CSS:
p.fSans { font-family: 'Roboto', sans-serif;}
Noto Serif:
HTML:
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap" rel="stylesheet">
CSS:
p.fSerif {font-family: 'Noto Serif', serif;}
Para o HTML, se formos utilizar as duas (ou mais) fontes em uma mesma página, basta uma única declaração:
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital@1&family=Roboto&display=swap" rel="stylesheet">
No arquivo CSS temos que especificar o tipo do fonte em cada classe:
p.fSerif {font-family: 'Noto Serif', serif;}
p.fSans {font-family: 'Roboto', sans-serif;
Ligação de Fontes Google à página Web
Siga os seguintes passos:
- Acesse o site Google Fonts;
- Selecione a família de fonte que deseja utilizar;
- Pode-se pesquisar pelo nome da fonte (lupa), ou
- Pode-se filtrar o tipo de fonte entre Serif, Sans Serif, Display, Handwriting e Monospace clicando em ‘Categorias’;
- Selecione os tipos dentro da família dando duplo clique sobre o nome da mesma;
- Selecione o estilo desejado (normal, bold, italic, etc), clicando sobre ‘Select this style’;
- Nota: Acrescente quantas fontes e estilos desejar;
- Nota: Acrescente quantas fontes e estilos desejar;
- Clique em 'Embed';
- Copie o código apresentado para o arquivo HTML e para o arquivo CSS
Em nosso projeto, vamos utilizar a fonte ‘Roboto’. O arquivo HTML e o arquivo CSS ficam conforme segue:
HTML:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../../_css/style_00103.css">
<link rel="stylesheet" href="../_font/fontawesome-free-5.12.1-web/css/all.css">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<title>FlexBox Model for Social Media - Parte 3</title>
</head>
CSS:
/* Define a abrangência do elemento html, considerando as bordas */
*{ box-sizing: border-box; }
body { font-family: 'Roboto';font-size: 16px; }
CORS - Croos Origin Resource Sharing
Existem regras de segurança especificadas pela W3C que regem a forma como os navegadores, ao estarem em um determinado site, tentam obter recursos em sites diferentes daquele em que a navegação está ocorrendo. Detalhes sobre como funcionam essas regras podem ser obtidos neste link.
O importante neste momento, é garantirmos que essas regras não impeçam a apresentação dos ícones das fontes Awesome em nossa página. Para isso, utilize somente caminhos relativos para os recursos, não empregando a forma absoluta.
Exemplo:
Utilizar:
<a href="../../MenuResponsivo/nomeArquivo.html" target="_blank"></a>
Em vez de:
<a href="/var/www/html/dev/web/MenuResponsivo/nomeArquivo.html" target="_blank"></a>
Downloads
O download dos arquivos (WebLayout_00103.html e style_00103.css) pode ser obtidos neste link e também na seção de Downloads do site. No próximo capítulo iremos terminar a implementação da barra de navegação.