diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e69de29 diff --git a/README.md b/README.md index 9b6d6cf..542f5df 100644 --- a/README.md +++ b/README.md @@ -13,4 +13,30 @@ Informação de alteração - git pull (puxar / trazer alterações do Git para sua máquina) ## GitFlow -Fluxo do Git \ No newline at end of file +Fluxo do Git + +### Branchs +São ramificações / versões paralelas + +- main / master (vai pra produção, quando o projeto é publicado) +- develop +- DOD Definition of Done: critérios de aceite +- versionamento 1.0.0 + +git checkout -b dev (cria uma branch) +git checkout master (cria uma branch) + +### Merge +Mescla de branchs +Você pode precisar resolver conflios manualmente + +git merge main + +### Pull Requests +Mesclar de branchs no repositório +Permite code review +O respositório resolve os conflitos automaticamente + +### configura o GitFlow +git flow init +git flow feature start {nome-da-feature} diff --git a/html/01-introducao.html b/html-css/01-introducao.html similarity index 68% rename from html/01-introducao.html rename to html-css/01-introducao.html index 78afa3e..172b345 100644 --- a/html/01-introducao.html +++ b/html-css/01-introducao.html @@ -1,6 +1,8 @@ + + Título da página exibido no navegador diff --git a/html/02-listas-e-links.html b/html-css/02-listas-e-links.html similarity index 93% rename from html/02-listas-e-links.html rename to html-css/02-listas-e-links.html index 3a3f6b2..8f121ff 100644 --- a/html/02-listas-e-links.html +++ b/html-css/02-listas-e-links.html @@ -3,6 +3,7 @@ HTML - Listas e Links +

Listas e Links

diff --git a/html/03-formatacao-de-texto.html b/html-css/03-formatacao-de-texto.html similarity index 96% rename from html/03-formatacao-de-texto.html rename to html-css/03-formatacao-de-texto.html index 6018713..7b228a2 100644 --- a/html/03-formatacao-de-texto.html +++ b/html-css/03-formatacao-de-texto.html @@ -3,6 +3,7 @@ HTML - Formatação de Texto +

Formatação de Texto

diff --git a/html/04-tabelas.html b/html-css/04-tabelas.html similarity index 94% rename from html/04-tabelas.html rename to html-css/04-tabelas.html index 83a48d5..a23e06b 100644 --- a/html/04-tabelas.html +++ b/html-css/04-tabelas.html @@ -3,6 +3,7 @@ HTML - Tabelas + diff --git a/html/05-layouts.html b/html-css/05-layouts.html similarity index 100% rename from html/05-layouts.html rename to html-css/05-layouts.html diff --git a/html/06-formularios.html b/html-css/06-formularios.html similarity index 100% rename from html/06-formularios.html rename to html-css/06-formularios.html diff --git a/html/07-Fundamentos-css.html b/html-css/07-Fundamentos-css.html similarity index 100% rename from html/07-Fundamentos-css.html rename to html-css/07-Fundamentos-css.html diff --git a/html/08-layouts-fluidos.html b/html-css/08-layouts-fluidos.html similarity index 100% rename from html/08-layouts-fluidos.html rename to html-css/08-layouts-fluidos.html diff --git a/html/09-elementos-graficos.html b/html-css/09-elementos-graficos.html similarity index 100% rename from html/09-elementos-graficos.html rename to html-css/09-elementos-graficos.html diff --git a/html/10-layouts-web.html b/html-css/10-layouts-web.html similarity index 92% rename from html/10-layouts-web.html rename to html-css/10-layouts-web.html index 1f068e2..85b3ab2 100644 --- a/html/10-layouts-web.html +++ b/html-css/10-layouts-web.html @@ -4,28 +4,21 @@ Layouts Web - - - - -

Front-end

-
- +
- -
- -

Design Responsivo

- - -
- -

layouts de Colunas

- +
+

Design Responsivo

+
+

layouts de Colunas

- -
- -
- +
+
café -
- -
- -
- +
+
+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem omnis numquam quibusdam aperiam harum enim. Quaerat, iste cum iure voluptatum consequatur sunt animi vel, itaque laudantium saepe libero fugiat similique. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem omnis numquam quibusdam aperiam harum enim. Quaerat, iste cum iure voluptatum consequatur sunt animi vel, itaque laudantium saepe libero fugiat similique. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem omnis numquam quibusdam aperiam harum enim. Quaerat, iste cum iure voluptatum consequatur sunt animi vel, itaque laudantium saepe libero fugiat similique. - -
- +
-
-
-
-
diff --git a/html/css/graficos.css b/html-css/css/graficos.css similarity index 100% rename from html/css/graficos.css rename to html-css/css/graficos.css diff --git a/html/css/layout.css b/html-css/css/layout.css similarity index 100% rename from html/css/layout.css rename to html-css/css/layout.css diff --git a/html/css/layouts-fluidos.css b/html-css/css/layouts-fluidos.css similarity index 100% rename from html/css/layouts-fluidos.css rename to html-css/css/layouts-fluidos.css diff --git a/html/css/modulo-07.css b/html-css/css/modulo-07.css similarity index 100% rename from html/css/modulo-07.css rename to html-css/css/modulo-07.css diff --git a/html/css/reset-meyer.css b/html-css/css/reset-meyer.css similarity index 100% rename from html/css/reset-meyer.css rename to html-css/css/reset-meyer.css diff --git a/html/css/reset.css b/html-css/css/reset.css similarity index 100% rename from html/css/reset.css rename to html-css/css/reset.css diff --git a/html/css/style.css b/html-css/css/style.css similarity index 100% rename from html/css/style.css rename to html-css/css/style.css diff --git a/html/css/tabelas.css b/html-css/css/tabelas.css similarity index 100% rename from html/css/tabelas.css rename to html-css/css/tabelas.css diff --git a/html/images/coffee-sm.jpg b/html-css/images/coffee-sm.jpg similarity index 100% rename from html/images/coffee-sm.jpg rename to html-css/images/coffee-sm.jpg diff --git a/html/images/coffee-square.jpg b/html-css/images/coffee-square.jpg similarity index 100% rename from html/images/coffee-square.jpg rename to html-css/images/coffee-square.jpg diff --git a/html/images/coffee.jpg b/html-css/images/coffee.jpg similarity index 100% rename from html/images/coffee.jpg rename to html-css/images/coffee.jpg diff --git a/html/images/coffee.svg b/html-css/images/coffee.svg similarity index 100% rename from html/images/coffee.svg rename to html-css/images/coffee.svg diff --git a/html/images/exemplo.svg b/html-css/images/exemplo.svg similarity index 100% rename from html/images/exemplo.svg rename to html-css/images/exemplo.svg diff --git a/html/images/fundo_homepage.png b/html-css/images/fundo_homepage.png similarity index 100% rename from html/images/fundo_homepage.png rename to html-css/images/fundo_homepage.png diff --git a/html/images/matrix.png b/html-css/images/matrix.png similarity index 100% rename from html/images/matrix.png rename to html-css/images/matrix.png diff --git a/html/images/opop.png b/html-css/images/opop.png similarity index 100% rename from html/images/opop.png rename to html-css/images/opop.png diff --git a/html/images/pattern.png b/html-css/images/pattern.png similarity index 100% rename from html/images/pattern.png rename to html-css/images/pattern.png diff --git a/prontocloud/README.md b/prontocloud/README.md new file mode 100644 index 0000000..46f7abf --- /dev/null +++ b/prontocloud/README.md @@ -0,0 +1,32 @@ +# Inbound Marketing +## Objetivos +- Construir um experiência completa para atrair leads para um negócio +- Projeto digno de portfólio +## Requisitos +- Codificação HTML e CSS +- Princípios de design +- HTML semântico +- Design responsivo +- Análise Heurística +- Visual Studio Code +- Git +## Metodologia +- Explorar conceitos e técnicas +- Evolução contínua: dividir o projeto em pequenas partes, testes, ciclos incrementais, revisão... +- AIDA + +\\\\ Atenção ///// + \\\ Interesse /// + \\ Desejo // + \ Ação / call-to-action 4% - 20% + + LEAD (e-mail) +## Briefing +- Criar uma campanha de inbound marketing para divulgar seus serviços de criação de sites, landing pages e e-mail marketing +- Gerar leads qualificados, com real interesse nos serviços oferecidos +- Criar conteúdo para post (blog), e-mail marketing, landing page (call-to-action: e-mail*) +- Criar formulários para captação de e-mails +- Post para redes sociais: texto + foto + url curta +- Incluir hospedagem (servidor web) + +- Git - histórico de evolução (commits detalhados) \ No newline at end of file diff --git a/prontocloud/css/styles.css b/prontocloud/css/styles.css new file mode 100644 index 0000000..1f6fb53 --- /dev/null +++ b/prontocloud/css/styles.css @@ -0,0 +1,170 @@ + +html { + font-size: 62.5%; +} + +body { + background-color: #f5f5f5; + font-family: 'Open Sans', sans-serif; +} + +.main-container { + display: block; + width: 100vw; + margin: 0 auto; +} + +.container { + display: block; + float: left; + padding: 20px; + max-width: 100%; + margin: 0 auto; + max-width: 1198px; +} + +header { + background: #fff; + display: block; + float: left; + padding: 20px; + width: 100%; + border-bottom: 1px solid #254159; +} + +h1 { + font-size: 2.4rem; + color: #254159; + margin-bottom: 20px; +} + +h2 { + font-size: 2rem; + color: #254159; + margin-bottom: 20px; +} + +h3 { + font-size: 1.8rem; + color: #254159; + margin-bottom: 20px; + padding-top: 10px; +} + +h4 { + font-size: 1.6rem; + color: #385874; + margin-bottom: 10px; + padding-top: 10px; +} + +p { + margin-bottom: 10px; + line-height: 1.4; + color: #333; +} + +img { + max-width: 100%; + height: auto; +} + +#tenho-interesse { + background-color: #b8c8d6; + width: 100%; +} + +#tenho-interesse form, +.cognito.c-med .c-forms-form, +.cognito.c-med .c-forms-form div { + background-color: #b8c8d6 !important; +} + +#tenho-interesse .cognito .c-forms-form .c-forms-form-title h2, +#tenho-interesse .cognito label[for], .cognito input[type=radio], .cognito input[type=checkbox] { + color: #385874; +} + +ol { + margin-left: 30px; +} + +ol li { + font-size: 1.4rem; + color: #454545; +} + +section { + background-color: #fff; + display: block; + float: left; + font-size: 1.5rem; /* equivalente a 15px */ + padding: 20px; + width: 100%; +} + +section nav { + display: block; + float: left; + width: 30%; +} + +nav li { + background-color: #efefef; + margin: 1px 20px 1px 0; + padding: 10px; +} + +nav li:hover { + background-color: #dfdfdf; +} + +nav a { + text-decoration: none; + color: #254159; +} + +nav a:hover { + color: #385874; +} + +section article { + display: block; + float: left; + width: 70%; +} + +footer { + background-color: #254159; + display: block; + float: left; + padding: 20px; + width: 100%; +} + +footer p { + color: #ffffff; + font-size: 1.4rem; +} + +footer small { + font-size: 80%; + display: block; +} + +.cognito { + height: 350px !important; + overflow: hidden !important; +} + +@media (max-width: 425px) { + section nav, + section article { + width: 100%; + } + + .container { + padding-left: 1%; + padding-right: 1%; + } +} \ No newline at end of file diff --git a/prontocloud/images/banner.png b/prontocloud/images/banner.png new file mode 100644 index 0000000..12bf8b0 Binary files /dev/null and b/prontocloud/images/banner.png differ diff --git a/prontocloud/images/conectado-700x300.jpg b/prontocloud/images/conectado-700x300.jpg new file mode 100644 index 0000000..719a421 Binary files /dev/null and b/prontocloud/images/conectado-700x300.jpg differ diff --git a/prontocloud/images/favicon.cc b/prontocloud/images/favicon.cc new file mode 100644 index 0000000..2468ab4 Binary files /dev/null and b/prontocloud/images/favicon.cc differ diff --git a/prontocloud/images/icon-touch-retina-ipad.png b/prontocloud/images/icon-touch-retina-ipad.png new file mode 100644 index 0000000..70851fb Binary files /dev/null and b/prontocloud/images/icon-touch-retina-ipad.png differ diff --git a/prontocloud/images/icon-touch-retina-iphone.png b/prontocloud/images/icon-touch-retina-iphone.png new file mode 100644 index 0000000..51d71b8 Binary files /dev/null and b/prontocloud/images/icon-touch-retina-iphone.png differ diff --git a/prontocloud/images/icon-touch-retina.png b/prontocloud/images/icon-touch-retina.png new file mode 100644 index 0000000..bc85b2b Binary files /dev/null and b/prontocloud/images/icon-touch-retina.png differ diff --git a/prontocloud/images/prontocloud.png b/prontocloud/images/prontocloud.png new file mode 100644 index 0000000..959c1ba Binary files /dev/null and b/prontocloud/images/prontocloud.png differ diff --git a/prontocloud/images/web-design-planning-700x300.jpg b/prontocloud/images/web-design-planning-700x300.jpg new file mode 100644 index 0000000..8b2ed12 Binary files /dev/null and b/prontocloud/images/web-design-planning-700x300.jpg differ diff --git a/prontocloud/index.html b/prontocloud/index.html new file mode 100644 index 0000000..418fa1b --- /dev/null +++ b/prontocloud/index.html @@ -0,0 +1,87 @@ + + + + + + + + + + + + + + + + + ProntoCloud + + + +
+
+ ProntoCloud +
+
+ +
+ +

Planejamento para criação de sites

+ + Planejamento para criação de sites + +

Guia de criação de sites

+ +

Você provavelmente está lendo aqui por que está pensando em fazer um novo site, se é a primeira vez muitas dúvidas podem surgir, e caso isso aconteça, pode entrar em contato com a gente. Mas antes pode avaliar cada etapa do nosso passo-a-passo:

+ +

Construir um site confiável e profissional exige uma série de conhecimentos em algumas áreas como design, comunicação, marketing, tecnologia, usabilidade, programação. Não precisa ser especialista em todas as áreas mas é fundamental ter uma boa noção ou contar com alguém que possa ajudar no desenvolvimento.

+ +

Também não existe uma receita para o sucesso, mas um conjunto de boas práticas que quando bem executadas potencializam as chances de você construir um site poderoso. E no primeiro passo, neste post falaremos sobre as etapas básicas do planejamento.

+ +

Planejamento para criação de site

+ +

Definição geral e protótipo do site.

+

É uma etapa bem abrangente pois é nela que deverão ser definidos todos os aspectos do projeto e é fundamental começar respondendo algumas perguntas como:

+ +

1. Quem vai acessar o site?

+ +

Qual seria o perfil do público que estaria interessado em acessar o seu site e obter informações ou mesmo comprar seus produtos?

+ +

O principal nesta etapa é conhecer e tentar entender ao máximo os possíveis usuários do seu site, o que elas fazem, qual tipo de linguagem seria mais apropriado para falar diretamente com elas?

+ +

Essas pessoas visualizariam seu site mais no computador ou no smartphone? Busque informações precisas em fontes confiáveis, acesse sites de concorrente diretos e indiretos, avalie desing, interação, tempo de reposta, linguagem…

+ +

2. Qual o tipo de site mais apropriado?

+

Se será um site institucional, um blog, um portal, uma loja virtual, entre outros.

+ +

Você precisa disponibilizar apenas suas informações básicas de contato? Precisa publicar conteúdo constantemente? Precisa vender pelo site? Precisa conectar pessoas? Disponibilizar algum serviço online?

+ +

3. Quais funcionalidades serão necessárias?

+

Seu site precisa de quais recursos para ser relevante para seus usuários?

+ +

Você precisará, por exemplo, de um mecanismo de busca interna, um formulário de contato, um mapa interativo, galeria de imagens? O ideal é levantar e classificar as referências.

+ +

4. Comece a produção!

+ +

Com as respostas das perguntas acima, certamente a ideia de onde se quer chegar estará mais clara. Então você consegue fazer um esboço do seu projeto?

+ +

Você pode começar:

+ +
    +
  1. Desenhando a estrutura do seu site na mão ou em qualquer software de produção gráfica de sua preferência.
    2. +
  2. Escrevendo os textos de todas as páginas e seções do site.
    3. +
  3. Pesquisar ou produzir fotos ou vídeos enriquecer o conteúdo do site.
    4. +
+ +

Se quiser pode compartilhar seu resultado com a gente. No próximo post vamos continuar com o nosso guia de criação de sites , falando sobre os aspectos técnicos do desenvolvimento do seu site.

+
+
+ +
+ + \ No newline at end of file