├── .gitignore
├── LICENSE
├── config.toml
├── content
├── _index.md
├── dev web
│ ├── _index.md
│ ├── flexbox.md
│ ├── grid.md
│ └── web_design.md
├── logic
│ ├── _index.md
│ └── algoritmos.md
└── versionamento
│ ├── _index.md
│ ├── git.md
│ └── github.md
├── readme.md
├── sass
├── _search.scss
├── _variables.scss
├── fabric-icons-inline.scss
└── main.scss
├── static
├── exemplo.png
├── favicon.ico
├── js.js
└── logo.png
├── templates
├── anchor-link.html
├── index.html
└── page.html
└── theme.toml
/.gitignore:
--------------------------------------------------------------------------------
1 | /public
2 | README.md
3 | LICENSE
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Roman Soldatenkov
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/config.toml:
--------------------------------------------------------------------------------
1 | base_url = "/"
2 | title = "Docs"
3 | compile_sass = true
4 | build_search_index = true
5 |
6 | [markdown]
7 | highlight_code = true
8 | highlight_theme = "charcoal"
9 |
10 | [extra]
11 | logo = "/logo.png"
12 | favicon = "/favicon.ico"
13 |
--------------------------------------------------------------------------------
/content/_index.md:
--------------------------------------------------------------------------------
1 | +++
2 | title = "index"
3 | +++
4 |
5 | Um projeto onde eu disponibilizo meus resumos e links interessantes para auxiliar outras pessoas que desejam estudar sobre programação.
6 |
7 | Considere ajudar esse projeto deixando uma star no [repositório](https://github.com/levxyca/docs).
8 |
9 | Feito com 🖤 por [levxyca](https://links.levxyca.codes/).
--------------------------------------------------------------------------------
/content/dev web/_index.md:
--------------------------------------------------------------------------------
1 | +++
2 | title = "desenvolvimento web"
3 | insert_anchor_links = "right"
4 | +++
--------------------------------------------------------------------------------
/content/dev web/flexbox.md:
--------------------------------------------------------------------------------
1 | +++
2 | title = "flexbox"
3 | +++
4 |
5 | # Flexbox
6 |
7 | # Fundamentos do Flexbox
8 |
9 | ## Display Flex
10 |
11 | O Flexbox está dividido em dois grupos: Flex Container e Flex Item.
12 |
13 | ```css
14 | display: flex;
15 | ```
16 |
17 | # Flex Container
18 |
19 | ## Flex Direction
20 |
21 | - Define a direção dos flex itens.
22 |
23 | ```css
24 | flex-direction: row;
25 |
26 | flex-direction: row-reverse;
27 |
28 | flex-direction: column;
29 |
30 | flex-direction: column-reverse;
31 | ```
32 |
33 | ## Flex Wrap
34 |
35 | - Define se os itens devem quebrar ou não a linha
36 | - Por padrão eles não quebram (nowrap)
37 |
38 | ```css
39 | flex-wrap: nowrap;
40 |
41 | flex-wrap: wrap;
42 |
43 | flex-wrap: wrap-reverse;
44 | ```
45 |
46 | ## Flex Flow
47 |
48 | - Atalho para as propriedades flex-direction e flex-wrap
49 |
50 | ```css
51 | flex-flow: row nowrap;
52 |
53 | flex-flow: row wrap;
54 |
55 | flex-flow: column nowrap;
56 | ```
57 |
58 | ## Justify Content
59 |
60 | - Alinha os itens flex no container de acordo com a direção.
61 |
62 | ```css
63 | justify-content: flex-start;
64 |
65 | justify-content: flex-end;
66 |
67 | justify-content: center;
68 |
69 | justify-content: space-between;
70 |
71 | justify-content: space-around;
72 | ```
73 |
74 | ## Align Items
75 |
76 | - Alinha os flex itens de acordo com o eixo do container
77 | - O alinhamento é diferente para quando os itens estão em colunas ou linhas
78 |
79 | ```css
80 | align-items: stretch;
81 |
82 | align-items: flex-start;
83 |
84 | align-items: flex-end;
85 |
86 | align-items: center;
87 |
88 | align-items: baseline;
89 | ```
90 |
91 | ## Align Content
92 |
93 | - Alinha as linhas do container em relação ao eixo vertical
94 |
95 | ```css
96 | align-content: stretch;
97 |
98 | align-content: flex-start;
99 |
100 | align-content: flex-end;
101 |
102 | align-content: center;
103 |
104 | align-content: space-between;
105 |
106 | align-content: space-around;
107 | ```
108 |
109 | # Flex Item
110 |
111 | ## Flex Grow
112 |
113 | - Habilidade de um flex item crescer
114 | - Por padrão o valor é zero
115 |
116 | ```css
117 | flex-grow: número;
118 |
119 | flex-grow: 0;
120 | ```
121 |
122 | ## Flex Basis
123 |
124 | - tamanho inicial do flex item antes da distribuição do espaço restante
125 |
126 | ```css
127 | flex-basis: auto;
128 |
129 | flex-basis: unidade;
130 |
131 | flex-basis: 0;
132 | ```
133 |
134 | ## Flex Shrink
135 |
136 | - Define a capacidade de redução de tamanho do item.
137 |
138 | ```css
139 | flex-shrink: 1;
140 |
141 | flex-shrink: 0;
142 |
143 | flex-shrink: número;
144 | ```
145 |
146 | ## Flex
147 |
148 | - Atalho para as propriedades flex-grow, flex-shrink e flex-basis
149 | - Para melhor consistência entre os browsers, é recomendado utilizar a propriedade flex ao invés de cada propriedade separada
150 |
151 | ```css
152 | flex: 1;
153 |
154 | flex: 0 1 auto;
155 |
156 | flex: 2;
157 |
158 | flex: 3 2 300px;
159 | ```
160 |
161 | ## Order
162 |
163 | - Modifica a ordem dos flex itens
164 | - Sempre do menor para o maior
165 |
166 | ```css
167 | order: número;
168 |
169 | order: 0;
170 | ```
171 |
172 | ## Align Self
173 |
174 | - Serve para definirmos o alinhamento específico de um único flex item dentro do nosso container
175 |
176 | ```css
177 | align-self: auto;
178 |
179 | align-self: flex-start;
180 |
181 | align-self: flex-end;
182 |
183 | align-self: center;
184 |
185 | align-self: baseline;
186 |
187 | align-self: stretch;
188 | ```
--------------------------------------------------------------------------------
/content/dev web/grid.md:
--------------------------------------------------------------------------------
1 | +++
2 | title = "grid"
3 | +++
4 |
5 | # Grid
6 |
7 | # Grid Container
8 |
9 | O Grid Container é a tag que envolve os itens do grid, ao indicar display: grid, essa tag passa a ser um Grid Container.
10 |
11 | ## Display
12 |
13 | Define o elemento como um grid container.
14 |
15 | ```css
16 | display: grid; // Torna o elemento um grid container.
17 |
18 | display: inline-grid; // Torna o elemento um grid container porém com comportamento inline.
19 |
20 | display: subgrid; // Para grids dentro de grids
21 | ```
22 |
23 | ## Grid Template Columns
24 |
25 | Define o número total de colunas que serão criadas no grid.
26 |
27 | ```css
28 | grid-template-columns: 100px 100px 100px 100px;
29 |
30 | grid-template-columns: 1fr 2fr;
31 |
32 | grid-template-columns: minmax(200px, 1fr) 1fr 1fr;
33 |
34 | grid-template-columns: repeat(3, 1fr);
35 |
36 | grid-template-columns: repeat(auto-fit, minmax(100px, auto));
37 | ```
38 |
39 | ## Grid Template Rows
40 |
41 | Define a quantidade de linhas no grid.
42 |
43 | ```css
44 | grid-template-rows: 50px 100px 50px 150px;
45 |
46 | grid-template-rows: 1fr 2fr;
47 | ```
48 |
49 | ## Grid Template Areas
50 |
51 | Define áreas específicas no grid. O ponto (.) pode ser utilizado para criar áreas vazias.
52 |
53 | ```css
54 | .grid {
55 | display: grid;
56 | }
57 |
58 | .logo {
59 | grid-area: logo;
60 | }
61 |
62 | grid-template-areas:
63 | "logo nav nav"
64 | "sidenav content advert"
65 | "sidenav footer footer";
66 | ```
67 |
68 | ## Grid Template
69 |
70 | Atalho para definir o grid-template-columns, grid-template-rows e grid-template-areas.
71 |
72 | ```css
73 | grid-template:
74 | "logo nav nav" 50px //Linha
75 | "sidenav content advert" 150px
76 | "sidenav footer footer" 100px
77 | / 100px 1fr 50px; //Coluna
78 | ```
79 |
80 | ## Gap
81 |
82 | Define o gap (gutter) entre os elementos do grid.
83 |
84 | ```css
85 | gap: 20px;
86 |
87 | column-gap: 20px;
88 |
89 | row-gap: 20px;
90 | ```
91 |
92 | ## Grid Auto Columns
93 |
94 | Define o tamanho das colunas do grid implícito.
95 |
96 | ```css
97 | grid-auto-columns: 100px;
98 | ```
99 |
100 | ## Grid Auto Rows
101 |
102 | Define o tamanho das linhas do grid implícito
103 |
104 | ```css
105 | grid-auto-rows: 100px;
106 | ```
107 |
108 | ## Grid Auto Flow
109 |
110 | Define o fluxo dos itens no grid. Se eles vão automaticamente gerar novas linhas ou colunas.
111 |
112 | ```css
113 | grid-auto-flow: row;
114 |
115 | grid-auto-flow: column;
116 |
117 | grid-auto-flow: dense;
118 | ```
119 |
120 | ## Grid
121 |
122 | Atalho geral para definir o grid: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns e grid-auto-flow
123 |
124 | ```css
125 | grid: 100px / 1fr 1fr;
126 |
127 | grid: 100px / auto-flow 100px 50px;
128 |
129 | .grid-3 {
130 | grid:
131 | "logo nav nav" 50px
132 | "sidenav content advert" 150px
133 | "sidenav footer footer" 100px
134 | / 100px 1fr 50px;
135 | }
136 | ```
137 |
138 | ## Justify Content
139 |
140 | Alinha os itens na horizontal
141 |
142 | ```css
143 | justify-content: start;
144 |
145 | justify-content: end;
146 |
147 | justify-content: stretch;
148 |
149 | justify-content: space-around;
150 |
151 | justify-content: space-between;
152 |
153 | justify-content: space-evenly;
154 |
155 | justify-content: center;
156 | ```
157 |
158 | ## Align Content
159 |
160 | Alinha os itens na vertical
161 |
162 | ```css
163 | align-content: start;
164 |
165 | align-content: end;
166 |
167 | align-content: stretch;
168 |
169 | align-content: space-around;
170 |
171 | align-content: space-between;
172 |
173 | align-content: space-evenly;
174 |
175 | align-content: center;
176 | ```
177 |
178 | ## Justify Items
179 |
180 | Justifica os itens na horizontal.
181 |
182 | ```css
183 | justify-items: start;
184 |
185 | justify-items: end;
186 |
187 | justify-items: center;
188 |
189 | justify-items: stretch;
190 | ```
191 |
192 | ## Align Items
193 |
194 | Alinha o conteúdo dos itens na vertical.
195 |
196 | ```css
197 | justify-items: start;
198 |
199 | justify-items: end;
200 |
201 | justify-items: center;
202 |
203 | justify-items: stretch;
204 | ```
205 |
206 | # Grid Item
207 |
208 | Os Grid Itens são os filhos diretos do Grid Container.
209 |
210 | ## Grid Column
211 |
212 | Define quais colunas serão ocupadas pelo grid item.
213 |
214 | ```css
215 | grid-column: 1;
216 |
217 | grid-column: 1 / 3;
218 |
219 | grid-column-start: 2;
220 |
221 | grid-column-end: 4;
222 |
223 | grid-column: span 2;
224 | ```
225 |
226 | ## Grid Row
227 |
228 | Define quais linhas serão ocupadas pelo grid item.
229 |
230 | ```css
231 | grid-row: 1;
232 |
233 | grid-row: 1 / 3;
234 |
235 | grid-row-start: 2;
236 |
237 | grid-row-end: 4;
238 |
239 | grid-row: span 2;
240 | ```
241 |
242 | ## Grid Area
243 |
244 | Define a área do item do grid. É um atalho para grid-row-start, grid-column-start, grid-row-end, grid-column-end.
245 |
246 | ```css
247 | grid-area: 1 / 2 / 4 / 3;
248 |
249 | grid-area: header;
250 | ```
251 |
252 | ## Justify Self
253 |
254 | Justifica o item do grid na horizontal.
255 |
256 | ```css
257 | justify-self: start;
258 |
259 | justify-self: end;
260 |
261 | justify-self: center;
262 |
263 | justify-self: stretch;
264 | ```
265 |
266 | ## Align Self
267 |
268 | Justifica o item do grid na vertical.
269 |
270 | ```css
271 | justify-self: start;
272 |
273 | justify-self: end;
274 |
275 | justify-self: center;
276 |
277 | justify-self: stretch;
278 | ```
--------------------------------------------------------------------------------
/content/dev web/web_design.md:
--------------------------------------------------------------------------------
1 | +++
2 | title = "web design"
3 | +++
4 |
5 | # Web Design
6 |
7 | Como criar um site responsivo do zero. Do design ao código.
8 |
9 | # Teoria do Design
10 |
11 | ## Fundamentos do Design
12 |
13 | ### O que é Design
14 |
15 | - "Design é acrescentar valor e significado, *simplificar*, esclarecer, modificar, dignificar, dramatizar, persuadir e talvez até mesmo entreter." - Paul Rand
16 |
17 | ### Forma e Espaço
18 |
19 | - Forma Geométrica (criado pelo homem)
20 | 1. Angulosas
21 | 2. Artificiais
22 | - Forma Orgânica (naturais)
23 | 1. Curvilíneas
24 | 2. Gestuais
25 | - "O espaço é definido e adquire significado no instante em que uma forma aparece dentro dele." - Timothy Samara
26 |
27 | ### Cores
28 |
29 | - **Círculo Cromático**
30 |
31 | - Análogas
32 | 1. Cores próximas uma das outras, geralmente 4, elas se relacionam bem.
33 | - Complementares
34 | 1. Cores opostas uma das outras, possuem total contraste.
35 | - Quentes e Frias
36 | 1. Frias: Calmas
37 | 2. Quentes: Chamativas
38 | - **Relatividade da cor**
39 | 1. "Se alguém disse 'vermelho' e houver cinquenta pessoas escutando, pode-se esperar que cada uma pensará em um vermelho" - Josef Albers
40 | - **Significado das cores**
41 | 1. Depende da cultura.
42 | 2. Guia Emocional das cores.
43 | - **RGB e CMYK**
44 | 1. RGB: parte do preto, depende da luminosidade, o branco é a cor máxima.
45 | 2. CMYK: sistema usado na impressão.
46 | - **Esquema de cor**
47 | 1. "Nunca tivemos vergonha de roubar grandes ideias." - Steve Jobs
48 | 2. Podemos pegar um esquema pronto na internet.
49 | 3. *Joalheria de cores*
50 |
51 | [Dribbble](http://dribbble.com)
52 |
53 | [Adobe Color](http://color.adobe.com)
54 |
55 | [Design Seeds](http://design-seeds.com)
56 |
57 | - **Contraste**
58 | 1. Entre matiz, saturação e valor
59 | 2. Corpo de texto precisa de um boa relação de contraste com o seu fundo
60 | 3. O contraste vai definir o que deve ser visto primeiro
61 |
62 | ### Tipografia
63 |
64 | - "É a arte e processo de criação de um texto. O objetivo principal é dar ordem estrutural e forma a comunicação."
65 | - "Se a tipografia faz algum sentido, ele é visual e histórico." - Robert Bringhurst
66 | - **Sem Serifas**
67 | 1. São neutras, funcionam bem em corpo de texto, usadas frequentemente na web para compor o texto.
68 | 2. *Ex: Helvetica, Arial e Avenir*
69 | - **Serifadas**
70 | 1. São clássicas, funcionam bem em corpo de texto, usadas frequentemente em livros para compor o texto.
71 | 2. *Ex: Garamonf, Georgia e Baskerville*
72 | - **Serifas Grossas**
73 | 1. Encorpadas, funcionam bem em títulos.
74 | 2. *Ex: Rockwell, Bitter e Kreon*
75 | - **Script**
76 | 1. Suaves, parecem ter sido feitas a mão e com um pincel. Funcionam bem em títulos.
77 | 2. *Ex: Salamander, Lucida Calligraphy e Brush Script*
78 | - **Góticas / Blackletter**
79 | 1. Estilizadas, utilizadas como referência ao período medieval. Boas para compor títulos.
80 | 2. *Ex: New Rocker, Lucida Backletter e Cabazon*
81 | - **Display**
82 | 1. Estilizadas, não existe padrão definido, são criadas de acordo com o projeto. Cada uma possui personalidade própria. Boas para compor títulos.
83 | 2. *Ex: Phosphate, Curlz MT e Hobo*
84 | - **Variáveis Tipográficas**
85 | - Tamanho do Tipo
86 | 1. *Ex: 14px, 16px ou 18px*
87 | - Altura da Linha
88 | 1. *Ex 1,5 x Tamanho do Texto*
89 | 2. 1,5 x 14px = 21px
90 | - Largura do Texto
91 | 1. Máximo de 10/14 palavras por linha
92 |
93 | *Obs: Indicações feitas para o compor do texto utilizando tipografias como Helvetica e Arial.*
94 |
95 | - **Escalas Tipográficas**
96 | - Utilize no máximo 6 tamanhos
97 | 1. *Utilizar mais de 6 tamanhos diferentes de texto pode criar um ruído visual*
98 | - Escolha uma escala harmônica
99 | 1. *11px, 14px, 18px, 24px, 38px e 48px*
100 | - Contraste é rei
101 | 1. *Nunca utilize tamanhos próximos, como 14px e 15px.
102 | - **Pareando Tipos**
103 | - Contraste é rei
104 | 1. *Nunca use tipografias parecidas para criar uma composição*
105 | - Use no máximo 2
106 | 1. *Quebre a regra apenas quando você dominar ela*
107 | - Escolha tipos complementares
108 | 1. *Tipografias serifadas para o título e sem serifas para o corpo de texto podem ser uma boa combinação*
109 | - **Alinhamento**
110 | - À Esquerda
111 | 1. *Esse é o padrão web, você vai usar 80% das vezes.*
112 | - Centralizado
113 | 1. *Bom para títulos, subtítulos ou pequenos blocos de texto. O layout deve acompanhar este alinhamento.*
114 | - Justificado
115 | 1. *Pouco utilizado na web, pois ainda não existem meios fácil que permitam a hifenização do texto. Quase sempre gera caminhos de rato na web.*
116 | - **Elementos Hierárquicos**
117 | - Negrito
118 | 1. *Utilizado para destacar palavras importantes*
119 | - Itálico
120 | 1. *Utilizado para estilizar citações, títulos de livros/filmes e outros elementos*
121 | - Sublinhado
122 | 1. *Geralmente utilizado para destacar palavras que possuem link para outra página*
123 | - **Elementos**
124 | - Caixa Alta
125 | 1. *Utilizado principalmente em títulos/subtítulos. Nunca utilize para o corpo de texto.*
126 | - **Tracking e Kerning**
127 | - *Traking* é a distância entre todas as letras.
128 | - *Kerning* é a distância entre duas letras.
129 |
130 | ### Grid
131 |
132 | - "Consiste em um conjunto de relações baseadas em alinhamento que servem como guias para distribuir os elementos ao longo de um formato." - Timothy Samara
133 | - **Grid na Web**
134 | - Tamanho da coluna
135 | 1. *É importante existir uma lógica e ser consistente.*
136 | - Espaçamento entre colunas
137 | 1. *Deve ser padronizado.*
138 | - Encaixe os elementos no grid
139 | 1. *Quebre apenas quando necessário.*
140 | - **Grid Responsivo**
141 | - Tamanho da coluna adaptável
142 | 1. *Pode diminuir ou aumentar de acordo com o tamanho do suporte(tela).*
143 | - Colunas móveis
144 | 1. *Colunas que ficam lado a lado em uma tela maior, podem passar a ficar embaixo da outra em uma tela menor.*
145 |
146 | ### Design para quem não é designer
147 |
148 | - **Os quatro princípios básicos**
149 | - Contraste
150 | - Repetição
151 | - Alinhamento
152 | - Proximidade
153 |
154 | ## UX Design e UI Design
155 |
156 | ### O que é UX Design
157 |
158 | - Interação entre o usuário e uma marca é uma experiência de uso
159 | - O trabalho do designer é garantir que as necessidades do usuário sejam atendidas e, se possível, com prazer durante esse processo
160 | - Consistência, facilidade de uso, sentidos, experiências, encantamento
161 |
162 | ### UX Design na Web
163 |
164 | - Usabilidade
165 | 1. *Garantir que o site seja de fácil uso.*
166 | - Prazer
167 | 1. *Superar expectativas, surpreender o usuário.*
168 |
169 | ### Usabilidade
170 |
171 | - Útil
172 | - Fácil de aprender
173 | - Memorável
174 | - Efetivo
175 | - Eficiente
176 | - Desejável
177 | - Prazeroso
178 |
179 | ### O que é UI Design
180 |
181 | - Processo de criação de interfaces
182 | - Objetivo de criar interfaces eficientes e efetivas
183 | - **Elementos comuns em uma interface:**
184 | 1. botões de ação
185 | 2. blocos de texto, títulos
186 | 3. formulários, caixas de texto
187 | 4. imagens, pictogramas
188 | 5. separadores
189 | 6. animações
190 |
191 | ### Estilos de UI
192 |
193 | - Skeumorfismo
194 | 1. faz referência a objetos reais no meio digital
195 | - Flat Design
196 | 1. utiliza cores chapadas, elimina sombras e texturas
197 | - Material Design
198 | 1. mantém o flat mas se aproveita da possibilidade de um ambiente 3d digital
199 |
200 | # Design do Projeto
201 |
202 | ## Planejamento
203 |
204 | ### Primeiros passos
205 |
206 | - **Dicas para o freelancer**
207 | 1. defina o seu serviço
208 | 2. defina o seu preço
209 | 3. defina seu ponto de venda
210 | 4. defina como você vai se promover
211 | - **Etapas para a construção de um site**
212 | 1. Briefing
213 | 1. objetivos do site
214 | 2. necessidades dos usuários
215 | 2. Arquitetura da Informação
216 | 1. define as principais áreas do site e o seu conteúdo
217 | 3. Wireframe
218 | 1. design da interação
219 | 4. Design
220 | 1. define as cores, tipografia, imagens e estilo
221 | 5. Código
222 | 1. codifica o layout e implementa o CMS
223 |
224 | ### Arquitetura da Informação
225 |
226 | - É o processo de organizar e categorizar a informação de modo que o usuário encontre da forma mais fácil possível
227 | - **Dicas de AI**
228 | 1. Aproveite as convenções
229 | 2. Crie níveis de detalhamento
230 | 3. Crie mais de um caminho
231 | 4. Concatene informações
232 | 5. Conheça o usuário
233 | - **Card Sorting**
234 | 1. Crie as possíveis categorias
235 | 2. Crie tiras de papéis com as informações
236 | 3. Peça para as pessoas distribuirem
237 | 4. Calcule os resultado
238 |
239 | ## Wireframe
240 |
241 | - É um desenho básico da interface que tem como objetivo retratar a arquitetura da informação e a usabilidade
242 | - **Vantagens**
243 | 1. Maior flexibilidade para mudanças
244 | 2. É de rápida elaboração
245 | 3. Facilita a criação do design final
246 | 4. Permite teste com o usuário no início do projeto
247 | - **Cores Wireframe**
248 | 1. d9e0e6
249 | 2. a9aeb3
250 | 3. 484b4d
251 | - **Tipografia Wireframe**
252 | 1. 14/20 corpo de exto
253 | 2. 18/25 corpo de texto
254 | 3. 24/30 subtitulo/titulo
255 | 4. 36/40 titulo
256 | 5. 48/60 titulo
257 |
258 | ## Design
259 |
260 | ### Estilo, Cores e Tipografia
261 |
262 | Após o Wireframe:
263 |
264 | - Definir o estilo com base na identidade visual do cliente
265 | - Definir cores, caso o cliente já possua cores definidas, adapte a paleta para a web
266 | - Definir tipografia
267 |
268 | # Básico da Codificação
269 |
270 | ## Introdução ao Código
271 |
272 | ### O que é codificar
273 |
274 | "É um conjunto de signos usados na transmissão e receptação de mensagens." Dicionário inFormal
275 |
276 | **Linguagens Web**
277 |
278 | - Programação (PHP, Ruby, C++, Python, Java)
279 | - Marcação (HTML)
280 | - Estilo (CSS)
281 | - Script (Javascript, Lua)
282 |
283 | **Interpretadores**
284 |
285 | Servidores: é onde seu site fica hospedado, geralmente para linguagens de programação.
286 |
287 | Browser/Navegador: interpreta o HTML, CSS e Javascript.
288 |
289 | ### Ferramentas
290 |
291 | Editor de textos: conhecido como IDE (Integrated Development Environment)
292 |
293 | Principais: Sublime Text, Brackets, Notepad++, Coda, Dreamweaver
294 |
295 | ### HTML Básico
296 |
297 | O que é?
298 |
299 | É um conjunto de regras(tags), criadas para amrcação de textos. Este conjunto facilita a compreensão semântica do texto por máquinas.
300 |
301 | - HTML = hypertext markup language.
302 | - Criado por tim berners-lee.
303 | - W3C - desenvolve as especificações.
304 | - HTML5 é a versão atual.
305 |
306 | **Anatomia**
307 |
308 | ```html
309 | --------- tag(abertura)
310 | ---------atributo
311 |
312 | Até um relógio parado está
313 | certo duas vezes ao dia.
314 | ---------- conteúdo
315 |
316 | --- tag (fechamento)
317 | ```
318 |
319 | - ignora quebra de linhas
320 | - apenas um espaço em branco é contado
321 | - pode usar tag dentro de tag
322 |
323 | ```html
324 |
325 |