Frontend Development Glossary: Termos Chave

Bem-vindo(a) ao nosso Frontend Development Glossary! Este guia foi especificamente concebido para ajudar aprendizes de inglês e aspirantes a desenvolvedores web a compreender o vocabulário essencial de frontend e termos de desenvolvimento web. Compreender esta linguagem especializada é um passo significativo para superar erros comuns de aprendizagem de línguas ao discutir tecnologia. O nosso propósito é tornar a aprendizagem destes termos cruciais mais fácil, preparando o caminho para uma jornada mais suave no excitante mundo da linguagem de design web e desenvolvimento.

Image: English for Frontend Developers

Índice

O que é Frontend Development Glossary?

Compreender o vocabulário especializado é crucial para qualquer pessoa que se esteja aprofundando no mundo da criação web. Esta seção do Frontend Development Glossary detalha termos fundamentais, ou vocabulário de frontend, que encontrará regularmente. Conhecer estas palavras aumentará significativamente a sua confiança e compreensão, especialmente se estiver a lidar com vocabulário de programação em inglês pela primeira vez. Pense nisto como o seu recurso de referência para decifrar a linguagem das interfaces web.

O desenvolvimento de frontend concentra-se principalmente no que os utilizadores veem e interagem num site ou aplicação – o lado do cliente. Envolve o uso de linguagens como HTML, CSS e JavaScript para construir os elementos visuais e as funcionalidades interativas. A familiaridade com termos relacionados com elementos HTML, termos CSS e conceitos de JavaScript é inegociável para o sucesso nesta área. Este glossário visa desmistificar estes termos, fornecendo definições claras e exemplos práticos para solidificar a sua compreensão. Cobriremos tudo, desde blocos de construção básicos a conceitos mais avançados como jargão de UI/UX.

VocabularyPart of SpeechSimple DefinitionExample Sentence(s)
HTML (HyperText Markup Language)NounA linguagem de marcação padrão para criar páginas web e aplicações web. Define a estrutura do conteúdo."For any aspiring web developer, understanding HTML is fundamental as it provides the basic skeleton for all web pages."
CSS (Cascading Style Sheets)NounUma linguagem de folha de estilo usada para descrever a apresentação (aparência e formatação) de um documento escrito em HTML."To control the visual appearance, designers use CSS to add colors, fonts, and layouts, making the website engaging."
JavaScript (JS)NounUma linguagem de programação de alto nível e versátil que permite conteúdo interativo e dinâmico em páginas web."JavaScript is essential for creating dynamic features such as interactive maps, animated graphics, and form validations."
FrameworkNounUm conjunto predefinido e padronizado de ferramentas, bibliotecas e convenções que fornece uma base para desenvolver aplicações de software de forma mais eficiente."Using a frontend framework like Angular or Vue.js can significantly speed up the development process for complex applications."
LibraryNounUma coleção de snippets de código pré-escritos, funções ou rotinas que os desenvolvedores podem reutilizar para realizar tarefas comuns, economizando tempo e esforço."jQuery is a popular JavaScript library that simplifies tasks like HTML DOM manipulation and event handling."
Responsive DesignNoun PhraseUma abordagem ao design web que visa fazer com que as páginas web sejam renderizadas bem e forneçam uma experiência de visualização ótima numa variedade de dispositivos e tamanhos de ecrã."Responsive design is crucial today, ensuring our site is easily navigable and readable on mobiles, tablets, and desktops alike."
UI (User Interface)NounO layout gráfico e todos os elementos com os quais um utilizador interage ao usar um site, aplicação ou dispositivo."A well-designed UI is intuitive, visually appealing, and helps users achieve their goals efficiently."
UX (User Experience)NounA perceção e o sentimento geral que um utilizador tem ao interagir com um produto, sistema ou serviço, focando na usabilidade, acessibilidade e satisfação."Good UX aims to create a seamless and enjoyable journey for the user, making them want to return to the website."
DOM (Document Object Model)NounUma interface de programação para documentos web que representa a estrutura da página como uma árvore de objetos, permitindo que programas alterem dinamicamente o conteúdo e o estilo."JavaScript often manipulates the DOM to update page content in real-time without needing to reload the entire page."
API (Application Programming Interface)NounUm conjunto de regras, protocolos e ferramentas definidas que permite que diferentes aplicações de software comuniquem e troquem dados entre si."Our travel website uses an API from an airline to fetch real-time flight information and booking options."
BreakpointNounNo design web responsivo, larguras de ecrã específicas nas quais o layout de um site muda para se adaptar a diferentes tamanhos de dispositivo, garantindo exibição ótima."The design team defined several breakpoints to ensure the layout adjusts smoothly from small mobile screens to large desktop monitors."
WireframeNounUm guia visual básico de baixa fidelidade ou planta utilizada nas fases iniciais do design web para delinear a estrutura, layout e hierarquia de conteúdo de uma página web."Before starting detailed design, the UX designer created a wireframe to map out key user interface elements and navigation flow."
Accessibility (a11y)NounA prática inclusiva de projetar e desenvolver sites e aplicações para que pessoas com deficiência possam percebê-los, compreendê-los, navegá-los e interagir com eles."Accessibility (often abbreviated as a11y) ensures that our web content is usable by everyone, including those relying on assistive technologies. Read more about Accessibility"
GitNounUm sistema de controlo de versão distribuído amplamente utilizado para rastrear mudanças no código-fonte durante o desenvolvimento de software, facilitando a colaboração entre desenvolvedores."Git allows multiple developers to work on the same project simultaneously and efficiently manage different versions of the code."
DebuggingVerb (gerund)O processo metódico de identificar, analisar e remover erros, bugs ou defeitos em software ou código de computador para garantir que funcione corretamente."Debugging JavaScript code can sometimes be challenging, but it's a critical skill for any frontend developer to master."

Leia mais: Web Development Glossary Termos Chave e Exemplos

Frases Comuns Utilizadas

Além de termos de desenvolvimento web individuais, o desenvolvimento de frontend é rico em frases e expressões comuns. Compreender estas expressões ajudará a comunicar de forma mais eficaz com colegas, participar com confiança em discussões técnicas e compreender melhor os requisitos do projeto. Estas são dicas de vocabulário essenciais para dominar inglês para tecnologia e podem evitar erros comuns de aprendizagem de línguas ao discutir tópicos complexos. Familiarizar-se com este jargão de UI/UX tornará a documentação e as conversas técnicas muito mais claras.

Muitas destas frases descrevem processos comuns, filosofias de design ou padrões de qualidade na indústria. Aprendê-las é como aprender atalhos numa nova língua; elas encapsulam ideias mais amplas de forma concisa. Por exemplo, compreender o que 'mobile first' implica pode moldar toda a sua abordagem a um projeto. Compilámos uma lista dessas frases frequentemente usadas, juntamente com explicações de quando e como utilizá-las. Isto irá melhorar ainda mais o seu vocabulário de programação.

PhraseUsage ExplanationExample Sentence(s)
Push to productionPara implantar a versão mais recente e testada do código do software ou site no ambiente do servidor ativo onde os utilizadores finais podem aceder e interagir com ele."After the final quality assurance checks passed, the development team got the green light to push to production this evening."
Pixel perfectUma expressão adjetiva que descreve uma implementação de site ou aplicação que corresponde precisamente aos mockups de design fornecidos pelo designer, até ao mais pequeno detalhe visual (cada pixel)."The client has a strong emphasis on branding, so they expect the final website to be pixel perfect according to their design specifications."
Mobile firstUma estratégia de design e desenvolvimento que prioriza projetar e construir a experiência do utilizador para dispositivos móveis primeiro, e depois aprimorá-la progressivamente para tablets e ecrãs de desktop maiores."By adopting a mobile first approach to our new e-commerce platform, we ensure an excellent shopping experience for the growing number of smartphone users."
Above the foldUm termo originário do layout de jornais, referindo-se à parte de uma página web que é visível para um utilizador na janela do seu navegador sem precisar de rolar para baixo."It's crucial for user engagement to place the most important content and the primary call-to-action above the fold on the homepage."
Cross-browser compatibilityA capacidade de um site ou aplicação web funcionar corretamente e renderizar o seu layout de forma consistente em diferentes navegadores web (por exemplo, Chrome, Firefox, Safari, Edge) e as suas versões."Ensuring cross-browser compatibility is a vital part of the testing phase to provide a seamless experience for all users, regardless of their browser choice."
Refactor the codeO processo de reestruturar o código de computador existente - melhorando a sua estrutura interna, legibilidade, manutenibilidade ou desempenho - sem alterar o seu comportamento externo ou funcionalidade."The senior developer decided it was time to refactor the code for the user authentication module to make it more secure and easier to update in the future."
Minify assetsO processo de remover todos os caracteres desnecessários do código-fonte (como espaços em branco, comentários e quebras de linha) e encurtar nomes de variáveis, sem alterar a funcionalidade, para reduzir o tamanho do arquivo e melhorar os tempos de carregamento."To optimize website performance and achieve faster page loads, a build step will minify assets like CSS and JavaScript files before deployment. Learn more about Minification"

Leia mais: Software Engineers Glossary Guia de Termos Chave

Conclusão

Dominar este Frontend Development Glossary especializado é um passo significativo na sua jornada para se tornar proficiente em desenvolvimento web e navegar em inglês para tecnologia. A prática consistente e o uso ativo destes termos de desenvolvimento web e frases construirão a sua confiança e fluência. Não se desanime com problemas de pronúncia iniciais ou erros de aprendizagem de línguas; concentre-se em compreender e aplicar este vocabulário de programação. O mundo do desenvolvimento de frontend é dinâmico e em constante evolução, por isso continue a aprender, continue a explorar e continue a construir! A sua dedicação em expandir o seu vocabulário de frontend sem dúvida valerá a pena.