Instruções para desenvolvimento do layout:
- Instalar o gulp em seu ambiente (NodeJS);
- Instalar as dependências do projeto para o gulp:
$ npm install
- Isso irá criar uma pasta node_modules na raiz do projeto com todas as dependência para o Gulp;
-
Na pasta assets-mggran estão já os assets necessários para a configuração do layout;
-
A paleta de cores para o projeto é:
- #223843
- #B2BD7E
- #749C75
- #F1F7EE
- #B0BEA9
-
Para a geração do arquivo CSS precisa-se utilizar o gulp para compilar automaticamente os arquivos sass (disponíveis em /assets/sass)
-
Para rodar o inspetor de arquivos do gulp:
$ gulp wsass
- Isso fará com que qualquer alteração nos arquivos .sass gerem automaticamente o correspondente em css.
- Para minificar os arquivos e criar as pastas dist:
$ gulp
- O gulp é configurável (javascript) seu código está disponível em .gulpfile.js
-
Para abrir as fotos em uma popup implementar o plugin fancybox;
-
As fontes utilizadas no projeto:
-
Pontos a serem estudados:
- Bootstrap 3 - Para alinhamentos e grades;
- Inclusão de fontes pelo Google Fonts;
- Sass :
- Entender a estrutura aplicada no projeto;
- Entender os mixins;
- Entender compilações;
- Entender hierarquia aninhada;
- HTML5
- Entender meta-tags para SEO;
- Estudar Schemas (para melhor indexar o endereço e telefone, por exemplo);
- SVG
- Como incluir um svg inline;
- Como incluir um svg por referência de arquivo;
- JavaScript
- Entender a estrutura de arquivos e organização dos códigos em objeto literal;
- Organização do Projeto
- Entender a estutura do projeto como um todo
-
Url de testes
- Estudar sobre o GitHub Pages;
- A url de testes do projeto é: https://droid-lab.github.io/droid-web-mggran/
- Sempre que houver um novo commit essa página será atualizada;
-
Estudar Configuração do Registro.br para apontar para o github;
-
Criar uma conta no gmail para o projeto do site ([email protected]);
-
Utilizar esta conta para gerar código do analytics;
-
Utilizar a mesma conta para criar e configurar o serviço de email zoho;
-
Inserir na página o código de acompanhamento do analytics;
-
Coletar materiais:
- Logotipo;
- Links para as redes sociais;
- Endereço e Telefone;
- Fotos, Nome e Curta descrição dos 12 produtos;
-
Criar conteúdos para cada um dos blocos com base em entrevista com o cliente;
- Texto sobre a empresa;
- Missão;
- Visão;
- Valores;
- Conteúdo CTA Contato;
- Texto produtos;
- Nome, Texto de cada um dos produtos;
- Observação Produtos;
- Email (Criar?), Telefones, Endereço;
- Redes Sociais;
-
Criar menu do site:
- Home;
- Sobre a Empresa;
- Produtos;
- Contato;
-
Estrutura de arquivos e pastas:
- index.html - Arquivo Principal;
- robots.txt - (Estudar) é o arquivo que libera a indexação pelo Google;
- .gitignore - São pastas e arquivos que serão ignoradas nos commits (node_modules é utilizando apenas localmente)
- assets - É a pasta de assets do projeto
- css - São os arquivos css do projeto;
- fonts - São as fonts (não disponíveis no google) utilizadas no projeto;
- images - São as imagens do projeto;
- scss - São os arquivos SASS que irão dar origem aos arquivos CSS;
- js - É a pasta com a estrutura de arquivos JS do projeto.
- bootstrap - Biblioteca do Bootstrap;
- includes - Algumas funcionalides padrões que podem ou não ser incluídas no projeto;
- jquery - Biblioteca do JQuery;
- libs - Plugins e Bibliotecas utilizadas no projeto;
- easing - melhoria de efeitos visuais;
- fancybox - popup da imagem;
- mouse.whell - scroll do mouse;
- nice.scroll - barra de rolagem personalisada;
- objects - São os javascripts correspondente a cada uma das páginas do projeto;
- index.js - Javascript específico da página index.html
- oracle - Javascript Genético, incluído obrigatoriamente por todas as páginas do projeto.
-
src e dist - São pastas que definem respectivamente: os arquivos editáveis (por seres humanos) e os arquivos comprimidos para publicação
-
Publicar atualizações;