Componentes

Componente: é um elemento de software que encapsula uma série de funcionalidades. Um componente é uma unidade independente, que pode ser utilizado com outros componentes para formar uma página web por exemplo.

Gerenciamento da complexidade: lidando com o número reduzido de componentes de cada vez, é possivel gerenciar a complexidade do sistema reduzindo riscos de desenvolvimento.
Decomposição da página em componentes indepedentes podem ser subcontratados. Assim o desenvolvimento pode se concentrar nas interface e conectores entre componentes.
Encarar os componentes como abstrações de um framework (aqui no caso o framework é o bootstrap).

Beneficios: facilidade de manutenção e atualização. O fato da página ser construida a partir de componentes facilita a localização de modificações e atualizações.

Espaço dos componentes:

    Requisitos:
    • Propósito: criação(conceito), estrutural (caso de uso, esqueleto, template) e comportamental (máquina de estado, componente javascript).
    • Escopo (elementos): Interface e conector.
Domínios do componente: reutilização, arquitetura, estilos de arquitetura, framework e padrões.

Tipos de componentes:
  • Elemento: Cabeçalho, rodapé, grid (os vários tipos), seção, artigo, navegação, ...
  • Procedimento Ex: Como selecionar, como usar,jornada, ...
  • Conceito: Ex: Componente, relacionamento entre componentes
  • Conjunto: Ex: tópico, artigo, site, ..
Desenvolvimento de componente
  • Requisitos
  • Modelagem:
    • Definir casos de uso
    • Definir modelo conceitual
    • Definir modelo comportamental
  • Especificação de software:
    • Identificação de componentes
    • Interação entre componentes
    • Especificação de componentes


Como selecionar o componente:

  • Ler lista de componentes
  • Classificar grupos de componentes.
  • Identificar relacionamentos entre componentes.
  • Identificar componentes do grupo a serem usados

Como usar: São reusados podendo ser adaptados as suas necessidades. Uma vez identificado o componente no passo anteriror:
  • Clicar em no nome do componente do lado direito para abrir uma nova guia no browse com o componente.
  • Salvar o componente e colocar numa pasta de trabalho.
  • Fazer as alterações necessárias com o editor de sua preferência.

    Tipos de Avisos:


    Atenção! X **** Para abrir nova guia com o "Nome do componente"" para salvar página em local desejado e alterar com editor de código clicar aqui ». ****

    OU

    Atenção! X **** Clicar no cabeçalho "Nome do componente" para abrir guia com página padrão para salvar página em local desejado e alterar com editor de código. ****
Atenção! X **** Clicar no cabeçalho "Página Padrão" para abrir guia com página padrão para salvar página em local desejado e alterar com editor de código. ****
Atenção! X **** Para abrir guia com "Código do Esqueleto Padrão para salvar página em local desejado e alterar com editor de código clicar aqui ». ****
Atenção! X **** Para abrir guia com "Header e Fooder para salvar página em local desejado e alterar com editor de código clicar aqui ». ****
Atenção! X **** Para abrir guia com "Indice para salvar página em local desejado e alterar com editor de código clicar aqui ». ****
Atenção! X **** Para abrir guia com "Indice para salvar página em local desejado e alterar com editor de código clicar aqui ». ****
Atenção! X **** Para abrir guia com "Dropdown para salvar página em local desejado e alterar com editor de código clicar aqui ». ****
Atenção! X **** Para abrir guia com "Abrir sanfona para salvar página em local desejado e alterar com editor de código clicar aqui ». ****
Atenção! X **** Clicar no cabeçalho "Briefing" para abrir guia com página padrão para salvar página em local desejado e alterar com editor de código. ****
Atenção! X **** Para abrir guia com "Gabarito grd linha para salvar página em local desejado e alterar com editor de código clicar aqui ». ****
Atenção! X **** Clicar no cabeçalho "Gabarito Grid" para abrir guia com página padrão para salvar página em local desejado e alterar com editor de código. ****
Atenção! X **** Para abrir guia com "Gabarito grd linha para salvar página em local desejado e alterar com editor de código clicar aqui ». ****
Atenção! X **** Clicar no cabeçalho "Componentes da página" para abrir guia com página padrão para salvar página em local desejado e alterar com editor de código. ****
Atenção! X **** Para abrir guia com "Menu na vertical para salvar página em local desejado e alterar com editor de código clicar aqui ». ****
Atenção! X **** Para abrir guia com "Menu na vertical com subitem para salvar página em local desejado e alterar com editor de código clicar aqui ». ****
Atenção! X **** Para abrir guia com "Menu na vertical com subitem para salvar página em local desejado e alterar com editor de código clicar aqui ». ****
Atenção! X **** Para abrir guia com "Carrosel para salvar página em local desejado e alterar com editor de código clicar aqui ». ****
Atenção! X **** Para abrir guia com "Seção para salvar página em local desejado e alterar com editor de código clicar aqui ». ****
Atenção! X **** Para abrir guia com "Modal para salvar página em local desejado e alterar com editor de código clicar aqui ». ****
Atenção! X **** Para abrir guia com "Modal para salvar página em local desejado e alterar com editor de código clicar aqui ». ****
Atenção! X **** Para abrir guia com "Modal para salvar página em local desejado e alterar com editor de código clicar aqui ». ****

Jumbotron

Código para executar a biblioteca bootstrap.


CARD


é um contêiner de conteúdo flexível e extensível. Inclui opções para cabeçalhos e rodapés, uma ampla variedade de conteúdo, cores de fundo contextuais e poderosas opções de exibição.

Exemplo

Cabeçalho
Card image cap
Titulo do cartão

Algum texto de exemplo rápido para construir sobre o título do cartão e compor a maior parte do conteúdo do cartão.

Ir algum lugar


Atenção! X **** Para abrir guia com "Convite para salvar página em local desejado e alterar com editor de código clicar aqui ». ****
Atenção! X **** Para abrir guia com "Tabela para salvar página em local desejado e alterar com editor de código clicar aqui ». ****
Atenção! X **** Para abrir guia com "Tabela comparativa para salvar página em local desejado e alterar com editor de código clicar aqui ». ****
Atenção! X **** Clicar no cabeçalho "Tabela com classificação" para abrir guia com página padrão para salvar página em local desejado e alterar com editor de código. ****
Atenção! X **** Para abrir guia com "Tabela de decisão para salvar página em local desejado e alterar com editor de código clicar aqui ». ****
Atenção! X **** Para abrir guia com "Acompanhamento para salvar página em local desejado e alterar com editor de código clicar aqui ». ****