Open Props:

Inovando no Mundo
da Tecnologia
Uma Exploração Profunda do Poder das
Propriedades Abertas

Alunos : Gregory , Jonatas e Thaylon

1
Introdução

2
Desenvolvimento
Desvendando o Open Props

O Open Props CSS Framework é uma ferramenta eficiente e personalizável que fornece um sistema
de design e estrutura para CSS, tornando-o uma boa escolha para quem prefere escrever seu
próprio CSS e deseja ajuda com a estrutura básica de design.

3
Desenvolvimento
Objetivo e Relevância
O Open Props tem como objetivo possibilitar que os desenvolvedores alcancem um design
profissional sem a necessidade de excessiva codificação. Sua flexibilidade e abordagem não
prescritiva oferecem opções de design rápidas, consistentes e personalizadas, permitindo aos
desenvolvedores criar seus próprios nomes de classe personalizados para seletores, uma
característica distintiva em relação a outras bibliotecas de CSS.

A relevância do Open Props está na manutenção de um código CSS limpo e simples, resultando em
menos código de modelo. Sua utilidade abrange qualquer framework, sendo incrementalmente
adotável. Além disso, o Open Props é altamente personalizável, permitindo mapeamento de
propriedades do JS e personalização de builds a partir da linha de comando.

4
Desenvolvimento
Vantagens e Desvantagens
Vantagens:

● Flexibilidade e adaptabilidade.
● Estímulo à inovação colaborativa.
● Interoperabilidade aprimorada.

Desvantagens:

● Possíveis desafios de segurança.

● Curva de aprendizado inicial.
● Contextos específicos onde alternativas podem ser mais adequadas.

5
 Instalacão
Para instalar o Open Props, você pode optar por duas abordagens: utilizando o npm ou vinculando
diretamente no seu arquivo HTML.

Usando npm:
npm install open-props

Vinculando no HTML:

<link rel="stylesheet" href="https://unpkg.com/open-props"/>

E atualize style.scss com a seguinte importação:

@import "open-props/style";

6
Open Props Variaveis
Open Props inclui Open Color , um esquema de cores
de código aberto otimizado para desenvolvimento de
UI.

7
Open Props Variaveis
Open Props inclui 30 gradientes artesanais. A direção
do gradiente linear pode ser alterada com um mix de
propriedades personalizadas.

8
 Aplicações Práticas
01 Jogos de VR e AR
O Open Props é usado em
02
uma variedade de jogos de
VR e AR, incluindo jogos de
ação, aventura, estratégia e
educação. Por exemplo, o
jogo de VR "Half-Life: Alyx"
usa o Open Props para criar
uma interface de usuário
intuitiva e fácil de usar.
Aplicativos de
realidade aumentada
O Open Props também é
usado em aplicativos de
realidade aumentada, como
aplicativos de navegação,
educação e entretenimento.
Por exemplo, o aplicativo de
realidade aumentada "Ikea
Place" usa o Open Props para
permitir que os usuários
visualizem móveis IKEA em
seus próprios ambientes.
9
Implementação
3D GAME DEV

10
 Implementação
Objetivo
Criar uma página web
sobre jogos 3D, para
aplicar Open Props .
Métodos
utilizados
Foram utilizado para a
implementação a
linguagem Html CSS e
OpenProps para o
desenvolvimento da
página.
Resultados alcançados
Os resultados alcançados com o uso do OpenProps
foram bastante positivos. O site foi desenvolvido
rapidamente e com facilidade, graças à simplicidade e
à flexibilidade da ferramenta. O OpenProps também
ajudou a melhorar a qualidade do site,
proporcionando recursos e funcionalidades que não
seriam possíveis com outras ferramentas. Por ex :
O site foi desenvolvido em 1 semana, contra as 2
●
semanas que seriam necessárias com outra
ferramenta.
● O site foi desenvolvido com um custo menor, graças à
flexibilidade e à acessibilidade do OpenProps.
● O site possui um layout moderno e atraente, que
melhora a experiência do usuário.
● O site possui uma estrutura de navegação intuitiva, que
facilita a localização dos jogos.
11
Como você pode ver, a retenção
dos usuários do Open Props é
alta, o que indica que o produto
é útil e valioso para os usuários.
O interesse dos usuários
também é alto, o que indica que
o produto é visto como uma
ferramenta promissora para o
desenvolvimento de aplicativos
web.

É importante ressaltar que

esses dados são apenas uma
estimativa, pois a retenção e o
interesse dos usuários podem
variar de acordo com o perfil
dos usuários e o contexto de
uso.

12
Conclusão
Em conclusão, a escolha entre Open Props,
Bootstrap e Tailwind depende em grande
parte das necessidades e preferências
individuais do desenvolvedor. Se você
valoriza a flexibilidade e a capacidade de
personalizar completamente o design, o
Open Props ou o Tailwind podem ser a
melhor escolha. Se você prefere um
framework que oferece uma ampla gama
de componentes pré-definidos para
acelerar o desenvolvimento, o Bootstrap
pode ser a melhor opção.

13
Referencias
https://open-props.style/

https://eightify.app/summary/web-design-and-development/in
troduction-to-open-props-css-framework

https://fadamakis.com/open-props-a-css-framework-for-the-m
odern-web-233894019078

14