Please enable JavaScript.
Coggle requires JavaScript to display documents.
Html Semântico e Posicionamento No Css (Pré-Código (UX (O resultado dessa…
Html Semântico e Posicionamento No Css
Pré-Código
Antes de codar e construir um site, existem etapas que a antecedem:
UX
User Experience Interface, esta parte defini a característica humana do projeto, definindo quantidade, conteúdo e localização de cada informação
O resultado dessa parte é uma série de definições sobre a navegação do site, representado num esboço de cada uma das visões (páginas) e visões parciais (alertas), estes esboços são chamados de wireframes
Exemplo de um wireframe
Essa parte não envolve a parte gráficas do site, somente a parte escrita e organizacional do projeto
Layout
É formado com a junção da parte da UX junto com a parte gráfica, ou seja, as imagens, cores, fundos, bordas entre outros
Os layouts são imagens estáticas já com o visual completo do projeto
Hora de codar!
HTML Semântico
São novas tags do HTML 5 que trazem significado e mais estrutura aos documentos
Tags semânticas
<header>
Seção onde se deve encontrar o cabeçalho do documento.
Antes para organizar, se usava uma div com um id
<footer>
Seção onde se deve encontrar o rodapé do documento
<nav>
Seção onde deve estar os blocos de navegação primários do documentos
É muito recomendado usa-los, para que seu site fique legal no Google :D
Sempre se deve olhar para esse lado: Qual a importância desse parte do documento para o site? E prioriza-la adequadamente, sempre buscando que o próprio documento se "auto-explique"
CSS
Mais um Seletor CSS: Classes
Esse seletor pode ser definido no html assim:
<[tag]> class="[nome da classe]">
E no css:
.[nome da classe]
{
[conteúdo]
}
Diferente do id, as classes não precisam ser únicas! E elas e pode-se usar mais de uma delas em um elemento :D
CSS Reset
Os navegadores possuem uma estilização padrão que pode interferir na nossa estilização, por isso existem os css resets, que setam um valor padrão básico para todas as características do css, sobrescrevendo a do navegador.
Os mais famosos são:
HTML5 Boilerplate
YUI3 CSS Reset
Eric Meyer Reset
A propriedade position
Determina qual o modo de posicionamento de um elemento
Pode ser passado para ele 4 valores:
Static
É o valor padrão para todos os elementos, o elemento irá ficar na sua posição de origem, ou seja, onde o navegador achou apropriado coloca-lo, não aceita coordenadas. (como as propriedades bottom, top, right e left)
Relative
Tem o comportamento igual ao do static, porém aceite coordenadas passadas no css.
Absolute
Nesse modo, o posicionamento será definido tomando como referência sua tag pai, se não tiver nenhuma tag pai, ele irá seguir tendo como referência a porção visível do navegador, aceitas coordenadas assim como relative.
Fixed
Nesse modo o elemento vai se referenciar tomando a parte visível do navegador ficando lá mesmo que a tela seja rolada.
HTML
Tags block e inline
Tags Block
São tags que ocupam toda a largura do documento.
Exemplos: Todas as tag de título, a tag <p>, a tag <div>, etc.
Tag Inline
São tags que ocupam somente o espaço necessário para elas mesmas, permitindo que outros elementos possam ser renderizados em sequencia, seja antes ou depois.
Exemplo: As tags de ênfase, a tag <span>, etc.
É possível mudar o comportamento padrão delas com a propriedade display do CSS.
