Preparação do sistema. Nesse curso utilizamos o NodeJs versão 4.9.1,
o Git, o Gulp e o node-sass.
Novamente temos os conflitos de versão de APIs. Estou tentando a
instalação de versões antigas utilizando o terminal em wsl no
VSCode.
Vamos ver como o sistema se comporta.
Lembrar de utilizar o sudo
Instalação do NodeJS v4.9.1: $ nvm install 4.9.1;
$ nvm use 4.9.1
Instalação do Gulp v3.9.1:
$ npm i [email protected] -global
Instalação do Gulp v1.2.1:
$ npm i [email protected] -global
Verificar qual versão do Sass será utilizada.
Instalar o Sass utilizando:
$ npm install node-sass
Tipos de protótipos:
Baixa Fidelidade: Feito com lápis e papel. Preparação da
ideia.
Media Fidelidade: Papel ou Software (Wireframe / Mockup).
Criação do design básico.
Alta Fidelidade: Protótipo funcional, mais próximo da
realidade.
Metodologias:
Evolucionária: Acompanhada pelo cliente vai evoluindo
conforme é desenvolvido.
Descartável: Cria vários protótipos e descarta os que são
rejeitados.
Para criar o diagrama de nosso projeto utilizamos o site
Draw.io
(Acessar com conta do OneDrive).
Criamos um container para o mockup e iremos iniciar a criação de uma
landing page.
Diagramação do header.
Aula 5 - Criando a área de informação do nosso mockupDiagramação do corpo do site.
Aula 6 - Criando a área de preços do nosso mockupDiagramação dos cards
Aula 7 - Criando o nosso banner no mockupDiagramação do banner inferior
Aula 8 - Criando a área de contato do nosso mockupDiagramação do formulário de contato
Aula 9 - Criando o rodapé do nosso mockupDiagramação do rodapé
Aula 10 - Conhecendo nossa stack de desenvolvimento
Para iniciar o projeto baixamos o Harvest no GitHub
Git Harvest.
Em seguida fazemos a descompactação do arquivo (podemos também
clonar o repositório), iniciamos com o comando
$ npm install para adicionar as dependencias do
node-module.
Em seguida executamos o comando $ gulp para iniciar o
server do projeto.
Dando continuidade a aula explica os principais arquivos criados
pelo Harvest e Gulp.
Assistir essa aula novamente para acompanhar os elementos dos
arquivos.
Podemos analisar o arquivo gulpfile.js e nele verificamos que
entre as tasks estão a compressão e compilação dos arquivos
de imagem, Javascript, Sass(Scss) e HTML. Também temos as funções de
deploy dos arquivos.
A função principal executa a função default e as demais
funções além de fazer o watch dos arquivos de scripts, styles
(scss), images e html.
Aqui fiz o dowload das imagens do projeto para a página de
images em seguida podemos ver no arquivo
$ \app\styles\scss\config\_variable.scss a pré-definição
da paleta de cores e das fontes.
Em seguida faremos a instalação do Bower
Ir para o site. O
Bower é um gerenciador de pacotes com o npm só que
mais voltado para o front-end. Para instalar utilizamos o seguinte
comando: $ npm install -g bower
Não utilizamos este pacote até agora. Agora iniciamos o projeto.
Os arquivos de trabalho ficam na pasta $ app\
Primeiramente criamos o <header> no arquivo index.html.
Em seguida foi criado o arquivo $ \app\pages\index.scss.
Neste arquivo criamos inicialmente os estilos do header incluindo a
imagem de background.
Em seguida foi criada a tag de <nav>. Essa tag foi estilizada
também no arquivo .scss entretanto ele é incluido dentro das
chaves{} do #header (não tem explicação do motivo).
Dentro da tag <nav> criamos a classe navbar iniciamos a
inclusão das classes do Bootstrap. Foram criadas as <div>
container e navbar-header e a tag <a> com a classe
navabar-brand para a inclusão do logotipo.
Após o logotipo iniciamos a criação do menu horizontal.
Não consegui o resultado esperado com as classes
collapse navbar-collapse e
nav navbar-nav navbar-right. Achei melhor continuar o
projeto e voltar a esse problema depois.
Estou abandonando este módulo pois ele é completamente desatualizado e incompatível com as versões atuais. Nenhuma API funciona corretamente. Não consigo fazer a instalação dos módulos, mesmo porque não existe uma referencia correta a eles. Existem algumas funcionalidades incorporadas ao projeto que não são explicadas, por exemplo Bower e o modernizr.js Mais informações no site. Talvez volte para o projeto em outro momento.