Website design - Menus Responsivos por

Anterior       Próximo     

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:

Organização de Arquivos

Figura 1 - Organização dos Arquivos para Upload

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:

Organização de Arquivos

Figura 2 - Localização dos Arquivos HTML e 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:

Formatos de tela

Figura 3 - Layouts em função da largura da tela do dispositivo

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:

  1. Acesse o site fonteawesome.io

  2. Localize a palavra “Download”. Fica logo abaixo do botão “Get More with Pro”

  3. Na janela que surge em seguida, clique em ‘Free for Web’:
Download Fontes Awesome

Figura 4 – Download Fontes Awesome

  1. Salve o arquivo e descompacte em um local a sua escolha

  2. Salve o arquivo descompactado na pasta _font
Download Fontes Awesome

Figura 5 – Localização dos Arquivos das Fontes Awesome

  1. 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:
Duplicando arquivos no visual studio editor

Figura 6 – Duplicação de Arquivos no VSE

  1. Dê duplo clique no arquivo ‘webLayout_00102.html’ para que fique ativo na janela do VSE.

  2. Clique em ‘File’ > ‘Salvar como’ e nomeie como webLayout_00103.html.

  3. Dê duplo clique no arquivo ‘style_00102.css’ para que fique ativo na janela do VSE.

  4. Clique em ‘File’ > ‘Salvar como’ e nomeie como style_00103.css.

  5. No VSE, no arquivo webLayout_00103.html, altere a linha 11:
  6.    de: link rel="stylesheet" href="../../_css/style_00102.css"
  7. para: link rel="stylesheet" href="../../_css/style_00103.css"

  1. Altere o título, na linha 12:
  2.    de: ”FlexBox Model for Social Media – Parte 2”
  3. 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:

Definindo arquivos de trabalho

Figura 7 – Diretório e Arquivos de Trabalho

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:

  1. Acesse o site Google Fonts;

  2. 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’;

  3. Selecione os tipos dentro da família dando duplo clique sobre o nome da mesma;

  4. Selecione o estilo desejado (normal, bold, italic, etc), clicando sobre ‘Select this style’;
    • Nota: Acrescente quantas fontes e estilos desejar;

  5. Clique em 'Embed';

  6. Copie o código apresentado para o arquivo HTML e para o arquivo CSS
Incorporando Google Fontes

Figura 8 – Incorporando Fontes Google

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.

Inicio do texto       Próximo