Estilização de carrinho de compra de página e-commerce | Provas Web Design e Desenvolvimento

Nome completo: Luílio da Silva Mota

Curso: Pós-graduação Em Desenvolvimento Full Stack

Área: Tecnologia Nº do estudo de caso: 86

Lembretes importantes:

• Leia o manual para elaboração de estudo de caso;

• Não é necessário reproduzir o enunciado do estudo de caso;

• Não se preocupe com a ABNT! Seu trabalho pode seguir este template (fonte

Arial, tamanho 12 com espaçamento simples);

• O estudo de caso deve ter no mínimo 400 e máximo de 800 palavras contando a

partir do título.

Estilização em CSS de carrinho de compras para a plataforma

Descomplicommerce com Angular

A experiência do usuário é o que guia e determina a tomada de decisão para

qual direção seguir no desenvolvimento de uma aplicação. Afinal, qual finalidade teria

um site, aplicativo ou ferramenta se não for utilizável pelo usuário?

Alinhado a esta preocupação, a criatividade e o conhecimento na estilização são

vistos como atributos fundamentais na obtenção de bons resultados em um produto

finalizado que seja atraente e satisfatório ao público a quem se destina.

Para implementação do carrinho de compras da plataforma Descomplicommerce

foram utilizados 3 arquivos principais seguindo o padrão de desenvolvimento em

Angular: “shopping-cart.component.ts” (arquivo em Type Script, responsável pelas

funções, ações e interações), “shopping-cart.component.html” (arquivo onde fica a

linguagem de marcação HTML, contém o template do componente) e “shopping-

cart.component.css” (arquivo em CSS responsável pelo estilo do componente da

aplicação). Para uma estilização moderna e prática foi instalado a biblioteca Angular

Material pelo comando “ng add @angular/material”.

As implementações de estilização do carrinho de compras foram feitas

principalmente no arquivo em css “shopping-cart.component.css” utilizando 8 seletores:

• “.carrinho”

• “.mat-divider”

• “.mdc-fab—extended”

• “.carrinho .titulo”

• “.carrinho button”

• “.carrinho .itens”

• “.carrinho .itens .lista"

• “.carrinho .finalizar”

Os seletores “.mat-divider” e “.mdc-fab—extended" foram utilizados para alterar

o que veio encapsulado na biblioteca do Angular Material, os demais foram criados

durante o desenvolvimento da estilização. Para obter uma aplicação responsiva foi

utilizado a estrutura CSS Media Query com a condição de alteração do seletor

Pré-visualização parcial do texto

Baixe Estilização de carrinho de compra de página e-commerce e outras Provas em PDF para Web Design e Desenvolvimento, somente na Docsity!

Nome completo: Luílio da Silva Mota Curso: Pós-graduação Em Desenvolvimento Full Stack Área: Tecnologia Nº do estudo de caso: 86 Lembretes importantes:

Leia o manual para elaboração de estudo de caso;
Não é necessário reproduzir o enunciado do estudo de caso;
Não se preocupe com a ABNT! Seu trabalho pode seguir este template (fonte Arial, tamanho 12 com espaçamento simples);
O estudo de caso deve ter no mínimo 400 e máximo de 800 palavras contando a partir do título. Estilização em CSS de carrinho de compras para a plataforma Descomplicommerce com Angular A experiência do usuário é o que guia e determina a tomada de decisão para qual direção seguir no desenvolvimento de uma aplicação. Afinal, qual finalidade teria um site, aplicativo ou ferramenta se não for utilizável pelo usuário? Alinhado a esta preocupação, a criatividade e o conhecimento na estilização são vistos como atributos fundamentais na obtenção de bons resultados em um produto finalizado que seja atraente e satisfatório ao público a quem se destina. Para implementação do carrinho de compras da plataforma Descomplicommerce foram utilizados 3 arquivos principais seguindo o padrão de desenvolvimento em Angular: “shopping-cart.component.ts” (arquivo em Type Script, responsável pelas funções, ações e interações), “shopping-cart.component.html” (arquivo onde fica a linguagem de marcação HTML, contém o template do componente) e “shopping- cart.component.css” (arquivo em CSS responsável pelo estilo do componente da aplicação). Para uma estilização moderna e prática foi instalado a biblioteca Angular Material pelo comando “ng add @angular/material”. As implementações de estilização do carrinho de compras foram feitas principalmente no arquivo em css “shopping-cart.component.css” utilizando 8 seletores:
“.carrinho”
“.mat-divider”
“.mdc-fab—extended”
“.carrinho .titulo”
“.carrinho button”
“.carrinho .itens”
“.carrinho .itens .lista"
“.carrinho .finalizar” Os seletores “.mat-divider” e “.mdc-fab—extended" foram utilizados para alterar o que veio encapsulado na biblioteca do Angular Material, os demais foram criados durante o desenvolvimento da estilização. Para obter uma aplicação responsiva foi utilizado a estrutura CSS Media Query com a condição de alteração do seletor

“.carrinho” reduzindo a largura para 250px quando a tela estiver até no máximo 600px de largura. Com tamanho máximo do carrinho de 400px, botões de cor #90ee90, fundo gradiente linear com as cores #c9f1c9 e #f8fff8 o código de estilização do componente do carrinho de compras no arquivo “shopping-cart.component.css” ficou da seguinte forma: .carrinho { max-width: 400px; max-height: 400px; border: 2 ; border-radius: 15px; padding: 20px; background:-moz-linear-gradient(#c9f1c9, #f8fff8) } .carrinho button { background-color: #90ee90; border-radius: 8px; } .mat-divider { padding-bottom: 15px; } .mdc-fab--extended { height: 35px; } .carrinho .titulo { margin-bottom: 20px; } .carrinho .itens { height: 200px; } .carrinho .itens .lista { height: 30px; display: flex; place-content: space-between;

Estilização de carrinho de compra de página e-commerce, Provas de Web Design e Desenvolvimento

Documentos relacionados

Pré-visualização parcial do texto

Baixe Estilização de carrinho de compra de página e-commerce e outras Provas em PDF para Web Design e Desenvolvimento, somente na Docsity!