diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 036a56d0..85fe3ec1 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -25,18 +25,32 @@ Existem diversas formas de contribuir com o projeto: * **Recomendação:** Visual Studio Code (gratuito, open-source, amplamente utilizado) * **Outras opções:** Sublime Text, Atom -### 2. **Instale um pré-processador SASS** +### 2. **Execute o Projeto** +Para visualizar seu projeto, você pode abrir o arquivo `index.html` em um navegador. Se quiser usar um servidor local (opcional), você pode instalar uma extensão no seu editor ou usar ferramentas como o **Live Server** no Visual Studio Code. + +
+ +:rotating_light: Para efetuar alterações em documentações + + Você pode utilizar o Github.Dev para efetuar as alterações em arquivos do tipo markdown para isso é só ir no repositório e apertar a tecla . (ponto) +
+
+
+ + :rotating_light: Para efetuar alterações visuais + +Caso queira mexer na parte visual do Diciotech, você também vai precisar, antes de executar o projeto: + +#### 1. **Instale um pré-processador SASS** Para compilar SASS em CSS, você precisará de um compilador. Recomendo a leitura do https://sass-lang.com/guide/ 👀 -### 3. **Compile seu SASS** +#### 2. **Compile seu SASS** Para compilar seu SASS em CSS, abra o terminal na pasta do seu projeto e execute: ```bash sass scss/styles.scss css/styles.css --watch ``` O `--watch` faz com que o SASS fique monitorando alterações no arquivo `.scss` e compile automaticamente. - -### 4. **Execute o Projeto** -Para visualizar seu projeto, você pode abrir o arquivo `index.html` em um navegador. Se quiser usar um servidor local (opcional), você pode instalar uma extensão no seu editor ou usar ferramentas como o **Live Server** no Visual Studio Code. +
### Adicionando um novo termo técnico no Diciotech diff --git a/assets/data/cards_pt-br.json b/assets/data/cards_pt-br.json index e6591af9..c888ed91 100644 --- a/assets/data/cards_pt-br.json +++ b/assets/data/cards_pt-br.json @@ -339,6 +339,28 @@ ], "description": "Desenvolvimento front-end é o desenvolvimento da interface gráfica, para que as pessoas usuárias possam visualizar e interagir com o que foi desenvolvido." }, + { + "title": "Design Critique", + "tags": [ + "Design" + ], + "description": "É um processo colaborativo onde designers, pessoas desenvolvedoras e outras partes interessadas revisam e avaliam um projeto ou conceito de design de forma construtiva. O objetivo é obter feedback valioso sobre a eficácia estética, funcionalidade e usabilidade do design, permitindo identificar pontos fortes e áreas de melhoria. Durante o rito, os participantes discutem aspectos como a coerência visual, a experiência do usuário e a aderência as metas do produto e a viabilidade técnica, promovendo um ambiente aberto onde ideias podem ser compartilhadas. Esse processo não apenas melhora o resultado final, mas também fortalece a colaboração e o aprendizado dentro da equipe." + }, + { + "title": "Design Ops", + "tags": [ + "Design" + ], + "description": "Prática que otimiza e integra o processo de design nas equipes de desenvolvimento de produtos digitais, promovendo a colaboração entre designers, pessoas desenvolvedoras e partes interessadas. Ela implementa frameworks, ferramentas e processos que melhoram a eficiência, consistência e qualidade do design. O foco é criar um ambiente estruturado que permita que os designers se concentrarem nas tarefas, enquanto aspectos operacionais, como documentação e gestão de recursos, são geridos de forma eficaz. Isso alinha as metas de design com os objetivos de negócios, resultando em produtos digitais mais coesos e bem projetados." + }, + { + "title": "Design System", + "tags": [ + "Design", + "Front-End" + ], + "description": "É um conjunto de diretrizes, componentes e padrões que orientam a criação e a manutenção de interfaces e experiências de usuário consistentes em produtos digitais. Inclui elementos como: paletas de cores, tipografia, ícones e padrões de layout, além de ser uma documentação para designers e pessoas desenvolvedoras sobre como e quando utilizar os componentes do design system. Visa melhorar a eficiência no desenvolvimento, garantir a coerência visual e funcional, e facilitar a colaboração entre as equipes de design e desenvolvimento." + }, { "title": "DevOps", "tags": [ @@ -553,7 +575,7 @@ "tags": [ "Ferramenta" ], - "description": "IDE é a abreviação de Integrated Development Environment, que em português significa Ambiente de Desenvolvimento Integrado. Trata-se de um programa com interfaces gráficas que facilitam a interação dos desenvolvedores na criação de aplicações. Normalmente um IDE inclui um editor de código fonte e ferramentas de depuração para identificar e corrigir erros. Exemplos populares de IDEs incluem Android Studio, Eclipse e Visual Studio Code." + "description": "IDE é a abreviação de Integrated Development Environment, que em português significa Ambiente de Desenvolvimento Integrado. Trata-se de um programa com interfaces gráficas que facilitam a interação das pessoas desenvolvedoras na criação de aplicações. Normalmente um IDE inclui um editor de código fonte e ferramentas de depuração para identificar e corrigir erros. Exemplos populares de IDEs incluem Android Studio, Eclipse e Visual Studio Code." }, { "title": "Integração Contínua", @@ -635,6 +657,15 @@ ], "description": "Em geometria diferencial, um manifold é um espaço topológico (superfície) com alta dimensionalidade que localmente se parece com o espaço euclidiano. Em aprendizado de máquina, um manifold é um espaço de características latentes que pode ser gerado a partir do treinamento de um modelo de aprendizado de máquina. A hipótese do manifold sugere que os dados de alta dimensão (por exemplo, dados do mundo real como imagens e vídeos) estão contidos em um espaço de baixa dimensão, onde as relações entre os dados são mais facilmente identificadas. A ideia é que, ao mapear os dados para um espaço de baixa dimensão, é possível encontrar padrões e relações mais facilmente do que no espaço de alta dimensão original." }, + { + "title": "Material", + "tags": [ + "Design", + "Front-End", + "Mobile" + ], + "description": "É um sistema de design criado e apoiado pelos designers e pessoas desenvolvedoras da Google. O Material.io inclui orientações detalhadas de UX e implementações de componentes de UI para Android, Flutter e Web." + }, { "title": "Merge", "tags": [ @@ -845,7 +876,7 @@ "tags": [ "Back-end" ], - "description": "O Python é uma linguagem de programação amplamente usada em aplicações da Web, desenvolvimento de software, ciência de dados e machine learning (ML). Os desenvolvedores usam o Python porque é eficiente e fácil de aprender e pode ser executada em muitas plataformas diferentes." + "description": "O Python é uma linguagem de programação amplamente usada em aplicações da Web, desenvolvimento de software, ciência de dados e machine learning (ML). As pessoas desenvolvedoras usam o Python porque é eficiente e fácil de aprender e pode ser executada em muitas plataformas diferentes." }, { "title": "React", @@ -947,6 +978,11 @@ ], "description": "A capacidade de um site ou aplicativo se adaptar a diferentes tamanhos de tela e dispositivos, como smartphones, tablets e desktops." }, + { + "title": "RPA", + "description": "Robotic Process Automation (Automação de Processos Robóticos), é uma tecnologia que permite a automação de tarefas repetitivas e baseadas em regras, utilizando robôs de software para realizar principalmente atividades repetitivas. Esses robôs imitam ações humanas em sistemas digitais, como clicar em botões, preencher formulários, copiar e colar dados, acessar sistemas e executar processos predefinidos.", + "tags": ["Conceito"] + }, { "title": "Ruby", "tags": [ @@ -1007,6 +1043,13 @@ ], "description": "Um StatelessWidget, no Flutter, é um componente que não possui estado interno mutável, ideal para partes da interface do usuário que não mudam com o tempo e não dependem de estado." }, + { + "title": "Style Guide", + "tags": [ + "Design" + ], + "description": "É uma biblioteca que reúne diretrizes de estilo e padrões visuais para a criação de produtos digitais. Ele inclui elementos como tipografia, paletas de cores, uso de ícones e layouts, mas não abrange aspectos técnicos, como código. O objetivo de um style guide é garantir a consistência visual e a coerência na comunicação de marca, servindo como referência para designers e equipes de marketing e comunicação mas sem a colaboração direta das pessoas desenvolvedoras." + }, { "title": "Swift", "tags": [ @@ -1068,7 +1111,7 @@ "Design", "Front-end" ], - "description": "É o desenho e execução de uma interface para a pessoa usuária. Por exemplo, garantir que um botão vai ser visto e apertado." + "description": "É o processo de criar a parte visual e interativa de um produto digital, como um site ou um aplicativo. Isso inclui o design de botões, menus, ícones e toda a aparência do layout, garantindo que seja esteticamente agradável e fácil de navegar. O objetivo do UI Design é fazer com que os usuários se sintam confortáveis e atraídos pelo visual do produto, aplicando cores, tipografia e elementos visuais que se alinhem à identidade da marca." }, { "title": "UIKit", @@ -1082,7 +1125,7 @@ "tags": [ "Back-end" ], - "description": " É uma linguagem visual que os desenvolvedores de software usam para descrever e projetar sistemas de software. Ela oferece diferentes tipos de diagramas, como diagramas de classes, sequência e atividades, para representar diferentes aspectos de um sistema. Esses diagramas ajudam as equipes a entenderem e comunicarem melhor as ideias e os designs do software." + "description": " É uma linguagem visual que as pessoas desenvolvedoras de software usam para descrever e projetar sistemas de software. Ela oferece diferentes tipos de diagramas, como diagramas de classes, sequência e atividades, para representar diferentes aspectos de um sistema. Esses diagramas ajudam as equipes a entenderem e comunicarem melhor as ideias e os designs do software." }, { "title": "Underfitting", @@ -1099,7 +1142,7 @@ "Design", "Front-end" ], - "description": "É o desenho e execução de uma experiência para a pessoa usuária. Por exemplo, desenhar as ações que farão com a pessoa se sinta bem ao entrar numa página, ou engajado, etc." + "description": "É o processo de criar produtos e serviços que oferecem uma experiência positiva e eficiente para os usuários. Isso envolve entender as necessidades e comportamentos das pessoas que usarão o produto, para garantir que ele seja fácil de usar, acessível e agradável. O objetivo é fazer com que a interação do usuário com o produto seja intuitiva, ajudando a resolver problemas e atender expectativas, desde o primeiro contato até a utilização contínua. É sobre projetar experiências que façam os usuários se sentirem satisfeitos e engajados com o produto." }, { "title": "Variável computada", diff --git a/assets/js/levenshtein.js b/assets/js/levenshtein.js new file mode 100644 index 00000000..9c8e35b0 --- /dev/null +++ b/assets/js/levenshtein.js @@ -0,0 +1,101 @@ +// Levenshtein algorithm by Gustaf Andersson: https://github.com/gustf/js-levenshtein +function _min(d0, d1, d2, bx, ay) +{ + return d0 < d1 || d2 < d1 + ? d0 > d2 + ? d2 + 1 + : d0 + 1 + : bx === ay + ? d1 + : d1 + 1; +} + +export function levenshtein(a, b) +{ + if (a === b) { + return 0; + } + + if (a.length > b.length) { + var tmp = a; + a = b; + b = tmp; + } + + var la = a.length; + var lb = b.length; + + while (la > 0 && (a.charCodeAt(la - 1) === b.charCodeAt(lb - 1))) { + la--; + lb--; + } + + var offset = 0; + + while (offset < la && (a.charCodeAt(offset) === b.charCodeAt(offset))) { + offset++; + } + + la -= offset; + lb -= offset; + + if (la === 0 || lb < 3) { + return lb; + } + + var x = 0; + var y; + var d0; + var d1; + var d2; + var d3; + var dd; + var dy; + var ay; + var bx0; + var bx1; + var bx2; + var bx3; + + var vector = []; + + for (y = 0; y < la; y++) { + vector.push(y + 1); + vector.push(a.charCodeAt(offset + y)); + } + + var len = vector.length - 1; + + for (; x < lb - 3;) { + bx0 = b.charCodeAt(offset + (d0 = x)); + bx1 = b.charCodeAt(offset + (d1 = x + 1)); + bx2 = b.charCodeAt(offset + (d2 = x + 2)); + bx3 = b.charCodeAt(offset + (d3 = x + 3)); + dd = (x += 4); + for (y = 0; y < len; y += 2) { + dy = vector[y]; + ay = vector[y + 1]; + d0 = _min(dy, d0, d1, bx0, ay); + d1 = _min(d0, d1, d2, bx1, ay); + d2 = _min(d1, d2, d3, bx2, ay); + dd = _min(d2, d3, dd, bx3, ay); + vector[y] = dd; + d3 = d2; + d2 = d1; + d1 = d0; + d0 = dy; + } + } + + for (; x < lb;) { + bx0 = b.charCodeAt(offset + (d0 = x)); + dd = ++x; + for (y = 0; y < len; y += 2) { + dy = vector[y]; + vector[y] = dd = _min(dy, d0, dd, bx0, vector[y + 1]); + d0 = dy; + } + } + + return dd; +} diff --git a/assets/js/script.js b/assets/js/script.js index 5806a729..ee41d572 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -1,10 +1,17 @@ import "./dark_mode.js"; +import { levenshtein } from "./levenshtein.js"; + +const exactWordScore = 12; +const partialWordScore = 10; +const levenshteinScore = 10; +const levenshteinThreshold = 3; const searchInput = document.querySelector("#search-input"); const cardsSection = document.querySelector("#cards"); const filterSelect = document.querySelector("#tags-filter"); let listOfCardsFiltered = []; let favoriteCards = []; + const starIcon = "https://img.icons8.com/ios/50/star--v1.png"; const starIconFilled = "https://img.icons8.com/ios-glyphs/30/ffe100/star--v1.png"; @@ -52,30 +59,145 @@ function filterCards() { searchCards(); } +function sortCards(sortingArray) { + if (listOfCardsFiltered.length > 0) { + if (!Array.isArray(sortingArray) || !sortingArray.length) { + const cards = document.querySelector("#cards"); + // selects all cards that are not hidden and sorts them by title + // every child is re-appended to cards in the order of the now sorted array. When an element is re-appended it is actually moved from its previous location + [...cards.querySelectorAll(".card:not([style*='display: none;'])")] + .sort((a, b) => a.querySelector(".card__title").textContent.toLowerCase().localeCompare(b.querySelector(".card__title").textContent.toLowerCase())) + .forEach(node => cards.appendChild(node)); + } else { + const cards = document.querySelector("#cards"); + // selects all cards that are not hidden and sorts them by the order of the sortingArray + // every child is re-appended to cards in the order of the now sorted array. When an element is re-appended it is actually moved from its previous location + [...cards.querySelectorAll(".card:not([style*='display: none;'])")] + .sort((a, b) => sortingArray.indexOf(a) - sortingArray.indexOf(b)) + .forEach(node => cards.appendChild(node)); + } + } +} + function searchCards() { - const inputValue = searchInput.value.toLowerCase(); - let cardsFiltered = []; + const inputValue = searchInput.value.toLowerCase().trim(); + let cardsScores = []; - for (const card of listOfCardsFiltered) { - const cardContent = card.textContent.toLowerCase(); + if (inputValue.length > 0) { + const searchWords = inputValue.split(/\s+/); - if (cardContent.includes(inputValue)){ - card.style.display = ""; - cardsFiltered.push(card); + for (const card of listOfCardsFiltered) { + let cardScore = 0; + + // search for words inside the title that either contains the search words or have a low levenshtein distance + // only consider the best case for each search word + const cardTitle = card.querySelector(".card__title").textContent.toLowerCase(); + const titleWords = cardTitle.split(/\s+/); + let titleScore = 0; + + searchWords.forEach((searchWord) => { + let wordScore = 0; + + titleWords.some((word) => { + if (word == searchWord) { + // breaks the loop if the word is an exact match, since no other word can have a higher score + wordScore = exactWordScore; + return true; + + } else if (wordScore < partialWordScore) { + if (word.includes(searchWord)) { + wordScore = partialWordScore; + + } else if (word.length > 3) { + const levenshteinDistance = levenshtein(searchWord, word); + + // only the word with the lowest levenshtein distance will be considered + if ((levenshteinDistance <= levenshteinThreshold) && (levenshteinScore - levenshteinDistance > wordScore)) { + wordScore = levenshteinScore - levenshteinDistance; + } + } + } + }); + + titleScore += wordScore; + }); + + // give extra points for words in title + cardScore += titleScore * 10; + + // search for words inside the description that either contains the search words or have a low levenshtein distance + // only consider the best case for each search word + const cardDescription = card.querySelector(".card__description").textContent.toLowerCase(); + const descriptionWords = cardDescription.split(/\s+/); + let descriptionScore = 0; + + searchWords.forEach((searchWord) => { + let wordScore = 0; + + descriptionWords.some((word) => { + if (word == searchWord) { + // breaks the loop if the word is an exact match, since no other word can have a higher score + wordScore = exactWordScore; + return true; + + } else if (wordScore < partialWordScore) { + if (word.includes(searchWord)) { + wordScore = partialWordScore; + + } else if (word.length > 3) { + const levenshteinDistance = levenshtein(searchWord, word); + + // only the word with the lowest levenshtein distance will be considered + if ((levenshteinDistance <= levenshteinThreshold) && (levenshteinScore - levenshteinDistance > wordScore)) { + wordScore = levenshteinScore - levenshteinDistance; + } + } + } + }); + + descriptionScore += wordScore; + }); + + cardScore += descriptionScore; + + if (cardScore > 0) { + card.style.display = ""; + cardsScores.push([card, cardScore]); + } else { + card.style.display = "none"; + } + } + + const msgNotFound = document.querySelector("div.msg"); + + if (cardsScores.length > 0) { + msgNotFound.style.display = "none"; + // sort the array of cards by score + cardsScores.sort((a, b) => b[1] - a[1]); + // remove the scores from the array + cardsScores = cardsScores.map((card) => card[0]); + sortCards(cardsScores); } else { - card.style.display = "none"; + msgNotFound.style.display = ""; } - } - const msgNotFound = document.querySelector("div.msg"); - msgNotFound.style.display = cardsFiltered.length==0 ? "" : "none"; - + } else { + // display all cards if search input is empty + for (const card of listOfCardsFiltered) { + card.style.display = ""; + cardsScores.push(card); + } + + const msgNotFound = document.querySelector("div.msg"); + msgNotFound.style.display = "none"; + sortCards(); + } } function insertCardsIntoHtml(data) { let cards = `
- Mulher olhando para site sem dados + Mulher olhando para site sem dados Data illustrations by Storyset
@@ -220,12 +342,12 @@ function generateCardId(defaultCardId, title, description) { * @returns {string} The hashed representation of the content. */ function generateContentId(title = '', description = '', hash = 5381) { - const data = (title + description).slice(0, 32).split(' ').join('') + const data = (title + description).slice(0, 32).split(' ').join('') - for (let i = 0; i < data.length; i++) { - hash = ((hash << 5) + hash) + data.charCodeAt(i); - } + for (let i = 0; i < data.length; i++) { + hash = ((hash << 5) + hash) + data.charCodeAt(i); + } - const hashString = Math.abs(hash).toString(36); // Convert to base-36 string - return hashString; -} \ No newline at end of file + const hashString = Math.abs(hash).toString(36); // Convert to base-36 string + return hashString; +}