├── .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 |

326 | Hello World! 327 |

328 | 329 | ``` 330 | 331 | ### Estrutura web 332 | 333 | **Estrutura básica** 334 | 335 | ```html 336 | 337 | 338 | 339 | 340 | 341 | Site Novo 342 | 343 | 344 | 345 |

Conteúdo do Site

346 | 347 | 348 | 349 | ``` 350 | 351 | ### Principais tags 352 | 353 | -

*paragrafo* 354 | -

*titulo principal* 355 | -

*titulo secundário* 356 | -

*terciário* 357 | - *dá importância para uma palavra no texto* 358 | - *negrito* 359 | - *enfase na palavra* 360 | - *itálico* 361 | - veja o link *links externos* 362 | - veja o link *links internos* 363 | - texto para ajudar leitores de tela *imagem* 364 | 365 | H1 deve ser o único da pagina 366 | 367 | H1 ao H6 368 | 369 | Atributos sempre vão para as tags de abertura 370 | 371 | **Doctype, Metalag, lang** 372 | 373 | ```html 374 | 375 | 376 | 377 | 378 | Principais Tags 379 | 380 | 381 | 382 | 383 | ``` 384 | 385 | ### Listas e Tabelas 386 | 387 | - Unordered List 388 | 389 | ```html 390 | 393 | ``` 394 | 395 | - Ordered List 396 | 397 | ```html 398 |
    399 |
  1. 400 |
401 | ``` 402 | 403 | - Tabela 404 | 405 | ```html 406 | 407 | //linha 408 | //coluna 409 | 410 |
É isso ai
411 | 412 | /*primeiro th geralmente é pro titulo da coluna*/ 413 | ``` 414 | 415 | ### Elementos estruturais 416 | 417 | - **Div**: abre e fecha e não possui qualquer significado semantico, ela serve p estruturarmos o conteúdo através do CSS, possuicaracteristicas de um elemento de bloco. 418 | - **Section e Article**: elementos semanticos que servem para estruturar o documento. 419 | - **Header e Footer**: elementos semanticos para estruturar o elemento. 420 | - **Nav**: para indicar que o site é navegavel. 421 | 422 | ### Formulário 423 | 424 | São utilizados para envio de dados ao servidor, podendo ser formulario de contato, busca, chat e etc. 425 | 426 | *
* 427 | 428 | Exemplo de formulario smples para envio de email: 429 | 430 | ```html 431 |
432 | 433 | 434 | 435 | 436 | 437 | 438 | 439 |