<?xml version="1.0" encoding="UTF-8"?>		<rss version="2.0"
			xmlns:content="http://purl.org/rss/1.0/modules/content/"
			xmlns:wfw="http://wellformedweb.org/CommentAPI/"
			xmlns:dc="http://purl.org/dc/elements/1.1/"
			xmlns:atom="http://www.w3.org/2005/Atom"
			xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
			xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
					>

		<channel>
			<title>UFSM - Feed Customizado RSS</title>
			<atom:link href="https://www.ufsm.br/busca?rss=true&#038;tags=ferramentas" rel="self" type="application/rss+xml" />
			<link>https://www.ufsm.br</link>
			<description>Universidade Federal de Santa Maria</description>
			<lastBuildDate>Thu, 23 Jul 2026 23:42:42 +0000</lastBuildDate>
			<language>pt-BR</language>
			<sy:updatePeriod>hourly</sy:updatePeriod>
			<sy:updateFrequency>1</sy:updateFrequency>
			<generator>https://wordpress.org/?v=7.0.2</generator>

<image>
	<url>/app/themes/ufsm/images/icons/favicon.ico</url>
	<title>UFSM</title>
	<link>https://www.ufsm.br</link>
	<width>32</width>
	<height>32</height>
</image> 
						<item>
				<title>Robotic Process Automation: introdução, conceitos e ferramentas</title>
				<link>https://www.ufsm.br/pet/sistemas-de-informacao/2025/09/04/robotic-process-automation-introducao-conceitos-e-ferramentas</link>
				<pubDate>Fri, 05 Sep 2025 01:00:00 +0000</pubDate>
						<category><![CDATA[Destaques]]></category>
		<category><![CDATA[Redações]]></category>
		<category><![CDATA[ferramentas]]></category>
		<category><![CDATA[Tech e Sociedade]]></category>

				<guid isPermaLink="false">https://www.ufsm.br/pet/sistemas-de-informacao/?p=3649</guid>
						<description><![CDATA[No jogo “Detroit: Become Human”, produzido pela Quantic Dream em 2018, robôs humanoides foram desenvolvidos com o objetivo de substituir pessoas em tarefas braçais e repetitivas. Neste sentido, o avanço da tecnologia naquele mundo distópico permitiu que uma parcela relevante dos processos fossem automatizados por robôs. Fora da ficção e de forma menos impactante, há [&hellip;]]]></description>
							<content:encoded><![CDATA[  <!-- wp:tadv/classic-paragraph -->
<p><span style="font-weight: 400">No jogo “Detroit: Become Human”, produzido pela Quantic Dream em 2018, robôs humanoides foram desenvolvidos com o objetivo de substituir pessoas em tarefas braçais e repetitivas. Neste sentido, o avanço da tecnologia naquele mundo distópico permitiu que uma parcela relevante dos processos fossem automatizados por robôs. Fora da ficção e de forma menos impactante, há uma crescente no uso deste tipo de ferramenta, o que conhecemos como Robot Process Automation (RPA). Através de tecnologias deste tipo, a humanidade caminha para um futuro parecido com o visualizado pelo jogo, uma vez que torna-se possível realizar tarefas simples e repetitivas por meio de códigos e fluxos programados, também chamados de robôs. </span></p>
<p><span style="font-weight: 400">Sob essa ótica, enxergamos tecnologias RPA como agentes de software que agem como humanos ao interagirem com sistemas. Assim, eles imitam a forma com a qual um indivíduo usaria uma aplicação, seguindo um caminho estabelecido e realizando tarefas que fazem parte dos processos do negócio em questão [1]. Este tipo de software é comum em áreas que envolvem processos financeiros, atendimento ao cliente e e-commerce, sendo que exemplos de tarefas que podem ser executadas por ele são a transferência de dados entre aplicações, web scraping e automação de listas de emails. Sendo assim, RPA é utilizado em tarefas bem estruturadas, repetitivas e baseadas em regras, uma vez que o processo deve estar bem definido antes de ser automatizado. </span></p>
<p><span style="font-weight: 400">De acordo com um estudo realizado pela BotCity, empresa responsável por produzir e manter um dos mais populares frameworks de RPA, </span><span style="font-weight: 400">66% das empresas consultadas na América Latina pretendem aumentar o investimento nessa tecnologia para ganhar escala. Desta forma, entende-se que a automatização de processos por robôs possui grande potencial de crescimento, devido ao interesse das empresas em melhorar seu fluxo de trabalho através desta ferramenta. Isto é justificado pela quantidade de benefícios que a implementação de uma tecnologia RPA gera à empresa, como a redução dos custos, a potencialização do trabalho da equipe e a diminuição de erros.</span></p>
<p><span style="font-weight: 400">Ao adotar tecnologias baseadas em automação de processos por robôs, a organização libera seus funcionários de tarefas repetitivas e muitas vezes tediosas, reservando mais tempo para a criatividade e tomada de decisões. Igualmente, ela economiza recursos ao alocar seus funcionários em tarefas mais complexas e importantes e diminui a quantidade de erros humanos que podem surgir destas pequenas tarefas repetitivas [2]. Outro ponto que merece destaque é a melhora da experiência do cliente, que recebe respostas mais rápidas devido à programação do robô que prepara-o para resolver algumas questões de maneira automatizada. Todavia, é necessário estar atento a falhas de segurança: mesmo que tudo fique registrado durante a execução do robô, algum erro em sua execução pode prejudicar toda a operação de um negócio.</span></p>
[caption id="attachment_3650" align="aligncenter" width="1280"]<img class="wp-image-3650 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2025/09/image2.jpg" alt="" width="1280" height="720" /> Imagem do jogo Portal 2[/caption]
<p><span style="font-weight: 400">Existem várias ferramentas e linguagens que apoiam o desenvolvimento de aplicações RPA. As soluções variam de acordo com a experiência do usuário, uma vez que é possível programar seus próprios robôs ou utilizar plataformas low code com interações prontas para usuários que não tem familiaridade com programação. Dentre as linguagens mais utilizadas estão C/C++, Python e Java [3], relevantes devido à popularidade que possuem e à variedade de bibliotecas referentes à automação de processos que se tem disponível ao programar nelas. Neste sentido, Selenium segue sendo uma importante ferramenta para a automação de processos pelo navegador, assim como Botcity (framework baseado em Selenium) e Playwright. Estes frameworks contam com funções prontas para interagir com elementos web, como clicar em botões, escrever em barras de pesquisa e utilizar teclas específicas como Enter e Tab. Para aqueles que preferem uma plataforma de uso simples e que integre toda a operação, é recomendável utilizar ferramentas low code prontas para iniciar a automatização dos processos por robôs sem precisar mexer em código, dentre as principais ferramentas estão UiPath, Automation Anywhere e Blue Prism [4].</span></p>
<p><span style="font-weight: 400">Neste panorama, UiPath é famoso por ser extremamente completo, oferecendo soluções em automação de área de trabalho, automação da web, automação de GUI, captura de tela, automação de mainframe, automação do Excel, entre outras. Já Automation Anywhere possui poucos produtos, porém, atua em diversos setores como serviços financeiros, saúde, seguros, ciências biológicas, manufatura, setor público e telecomunicações, o que também serve para comprovar a flexibilidade no uso de RPA. Por fim, o diferencial da Blue Prism é fornecer recursos como Escalabilidade, Resiliência, Conformidade e Segurança e suportar diversas plataformas.</span></p>
<p><span style="font-weight: 400">Ademais, vale ressaltar que a RPA é bem diferente da inteligência artificial. A primeira simula a interação de um humano com o computador, seguindo estritamente o que foi programada para fazer, enquanto a IA combina a automação com análise cognitiva, usufruindo de aprendizado de máquina e processamento de linguagem natural para gerar hipóteses e formular respostas. Contudo, IA e RPA são ferramentas que se complementam muito bem, uma vez que a IA pode integrar o processo de RPA para lidar com caminhos e casos de uso mais completos e complexos [5].</span></p>
<p><span style="font-weight: 400">Diante do exposto, automatizar processos com RPA nem sempre é uma tarefa fácil, uma vez que a complexidade do desenvolvimento depende muito da qualidade das aplicações com as quais o robô deve interagir. Para evitar problemas, é importante mapear detalhadamente os caminhos a serem percorridos pelo agente, incluindo caminhos de possíveis erros. Desta forma, é possível antecipar problemas e evitar perdas operacionais ao utilizar recursos de RPA.</span></p>
<p><span style="font-weight: 400">Igualmente, os avanços tecnológicos neste campo de pesquisa levantam questões éticas e tecnológicas. Quais tarefas devem ser realizadas por robôs e quais devem ser realizadas por humanos? Estariam os robôs tomando lugares de trabalhadores reais? De acordo com </span><span style="font-weight: 400">van der Aalst e Bichler</span><span style="font-weight: 400">, professores doutores da Universidade Técnica de Munique (TUM), ao integrar tecnologias como inteligência artificial e aprendizado de máquina ao uso de RPA, os robôs aprendem tarefas mais complexas e menos regradas. Da mesma forma com a qual humanos aprendem com um instrutor, os robôs poderiam aprender acompanhando humanos realizando determinadas tarefas. Neste sentido, estamos longe de ser substituídos pelos agentes de software e vivermos um cenário parecido com Detroit: Become Human, todavia, é possível que mais e mais trabalhos sejam realizados por meio da RPA com o aprimoramento desta promissora tecnologia e sua integração com outros tipos de ferramentas.</span></p>
[caption id="attachment_3651" align="aligncenter" width="768"]<img class="wp-image-3651 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2025/09/image1.jpg" alt="" width="768" height="432" /> Imagem do jogo Detroit: Become Human (2018)[/caption]
<h2> </h2>
<h2><strong>Referências</strong></h2>
<p><span style="font-weight: 400">[1] WILLCOCKS, Leslie P.; LACITY, Mary C.; CRAIG, Andrew. Robotic process automation: contemporary themes and challenges. </span><b>Journal of Information Technology Teaching Cases</b><span style="font-weight: 400">, v. 9, n. 2, p. 17-28, 2019. Disponível em:</span><a href="https://www.sciencedirect.com/science/article/abs/pii/S0166361519304609"> <span style="font-weight: 400">https://www.sciencedirect.com/science/article/abs/pii/S0166361519304609</span></a><span style="font-weight: 400">. Acesso em: 2 set. 2025.</span></p>
<p><span style="font-weight: 400">[2] BONES, Anaíra. O que é RPA (Robotic Process Automation) e como funciona? </span><b>Zendesk Blog</b><span style="font-weight: 400">, 13 jun. 2024. Disponível em:</span><a href="https://www.zendesk.com.br/blog/o-que-e-rpa-robotic-process/"> <span style="font-weight: 400">https://www.zendesk.com.br/blog/o-que-e-rpa-robotic-process/</span></a><span style="font-weight: 400">. Acesso em: 2 set. 2025.</span></p>
<p><span style="font-weight: 400">[3] BEST programming languages for RPA UiPath. </span><b>The Knowledge Academy</b><span style="font-weight: 400">, 16 maio 2024. Disponível em:</span><a href="https://www.theknowledgeacademy.com/blog/best-programming-languages-for-rpa-uipath/"> <span style="font-weight: 400">https://www.theknowledgeacademy.com/blog/best-programming-languages-for-rpa-uipath/</span></a><span style="font-weight: 400">. Acesso em: 2 set. 2025.</span></p>
<p><span style="font-weight: 400">[4] AS 7 Principais Ferramentas de Automação Robótica de Processos (RPA). </span><b>Data Science Academy</b><span style="font-weight: 400">, 27 mar. 2023. Disponível em:</span><a href="https://blog.dsacademy.com.br/7-principais-ferramentas-de-automacao-robotica-de-processos_rpa/"> <span style="font-weight: 400">https://blog.dsacademy.com.br/7-principais-ferramentas-de-automacao-robotica-de-processos_rpa/</span></a><span style="font-weight: 400">. Acesso em: 2 set. 2025.</span></p>
<p><span style="font-weight: 400">[5] IBM. O que é a Automação Robótica de Processos (RPA)? </span><b>IBM</b><span style="font-weight: 400">, c2024. Disponível em:</span><a href="https://www.ibm.com/br-pt/think/topics/rpa"> <span style="font-weight: 400">https://www.ibm.com/br-pt/think/topics/rpa</span></a><span style="font-weight: 400">. Acesso em: 2 set. 2025.</span></p>
<p><span style="font-weight: 400">[6] SANTOS, F. C.; et al. Robotic Process Automation: a case study in the tax area of a shared services center. </span><b>JISTEM - Journal of Information Systems and Technology Management</b><span style="font-weight: 400">, v. 18, e202118002, 2021. Disponível em:</span><a href="https://www.scielo.br/j/jistm/a/m7cqFWJPsWSk8ZnWRN6fR5m/?format=html&amp;lang=en"> <span style="font-weight: 400">https://www.scielo.br/j/jistm/a/m7cqFWJPsWSk8ZnWRN6fR5m/?format=html&amp;lang=en</span></a><span style="font-weight: 400">. Acesso em: 2 set. 2025.</span></p>
<p><span style="font-weight: 400">[7] VAN DER AALST, W. M. P.; BICHLER, M.; HEINZL, A. Robotic Process Automation. </span><b>Business &amp; Information Systems Engineering</b><span style="font-weight: 400">, v. 60, p. 269–272, 2018. Disponível em:</span><a href="https://link.springer.com/article/10.1007/s12599-018-0542-4"> <span style="font-weight: 400">https://link.springer.com/article/10.1007/s12599-018-0542-4</span></a><span style="font-weight: 400">. Acesso em: 2 set. 2025.</span></p>
<p style="text-align: right"><strong>Autor: Gustavo Pott de Oliveira</strong></p>
<p><br /><br style="font-weight: 400" /><br style="font-weight: 400" /><br style="font-weight: 400" /><br /></p>
<!-- /wp:tadv/classic-paragraph -->

<!-- wp:tadv/classic-paragraph /-->]]></content:encoded>
													</item>
						<item>
				<title>n8n - Ferramenta de automatização de fluxos low-code</title>
				<link>https://www.ufsm.br/pet/sistemas-de-informacao/2025/02/21/n8n-ferramenta-de-automatizacao-de-fluxos-low-code</link>
				<pubDate>Fri, 21 Feb 2025 12:00:29 +0000</pubDate>
						<category><![CDATA[Destaques]]></category>
		<category><![CDATA[Redações]]></category>
		<category><![CDATA[ferramentas]]></category>

				<guid isPermaLink="false">https://www.ufsm.br/pet/sistemas-de-informacao/?p=3581</guid>
						<description><![CDATA[A automação de processos tem se tornado cada vez mais essencial para empresas que buscam otimizar operações, reduzir custos e aumentar a produtividade. No entanto, a complexidade técnica envolvida na criação de fluxos de trabalho automatizados muitas vezes exige conhecimentos avançados em programação, o que pode ser um obstáculo para muitas organizações. É nesse contexto [&hellip;]]]></description>
							<content:encoded><![CDATA[  <!-- wp:tadv/classic-paragraph -->
<p><span style="font-weight: 400">A automação de processos tem se tornado cada vez mais essencial para empresas que buscam otimizar operações, reduzir custos e aumentar a produtividade. No entanto, a complexidade técnica envolvida na criação de fluxos de trabalho automatizados muitas vezes exige conhecimentos avançados em programação, o que pode ser um obstáculo para muitas organizações. É nesse contexto que as ferramentas low code, como o n8n, ganham destaque, permitindo que usuários com pouca ou nenhuma experiência em codificação criem automações poderosas e personalizadas.</span></p>
[caption id="attachment_3582" align="aligncenter" width="929"]<img class="wp-image-3582 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2025/02/image1.png" alt="" width="929" height="600" /> fonte: https://n8n.io/features/[/caption]
<p> </p>
<h2><strong>O que é o n8n?</strong></h2>
<p><span style="font-weight: 400">O n8n (pronuncia-se "n-eight-n") é uma plataforma de automação de fluxos de trabalho de código aberto e low code. Lançado em 2019, o n8n se diferencia por sua flexibilidade e capacidade de integrar uma ampla variedade de serviços, desde aplicativos populares como Google Sheets, Slack e Salesforce até APIs personalizadas. A ferramenta é projetada para ser intuitiva, permitindo que usuários criem automações complexas por meio de uma interface visual, onde os fluxos de trabalho são construídos arrastando e soltando "nós" (nodes) que representam ações ou integrações.</span></p>
<p> </p>
<h2><strong>As 4 principais vantagens do n8n:</strong></h2>
<ol>
<li style="font-weight: 400"><span style="font-weight: 400"><strong>Flexibilidade e Personalização:</strong> Ao contrário de muitas ferramentas low code que limitam o usuário a funcionalidades pré-definidas, o n8n oferece uma grande liberdade para criar automações altamente personalizadas. Isso é possível graças à sua capacidade de se integrar com praticamente qualquer API, permitindo que as empresas adaptem os fluxos de trabalho às suas necessidades específicas.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400"><strong>Código Aberto:</strong> O fato de ser open source é um dos maiores diferenciais do n8n. Isso significa que as empresas podem modificar e estender a plataforma conforme necessário, sem depender exclusivamente do fornecedor. Além disso, a comunidade ativa em torno do n8n contribui com novos nós e funcionalidades, ampliando constantemente as possibilidades da ferramenta.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400"><strong>Custo-efetividade:</strong> Para pequenas e médias empresas, o custo de implementação de automação pode ser um fator decisivo. O n8n oferece uma versão gratuita com funcionalidades robustas, e sua natureza open source permite que as empresas evitem custos de licenciamento caros.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400"><strong>Interface Intuitiva:</strong> A interface visual do n8n é projetada para ser acessível até mesmo para usuários sem experiência técnica. A lógica de construção de fluxos de trabalho é clara, e a plataforma oferece uma ampla documentação e tutoriais para facilitar o aprendizado.</span></li>
</ol>
[caption id="attachment_3583" align="aligncenter" width="800"]<img class="wp-image-3583 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2025/02/image2.gif" alt="Representação de uma automação em n8n sendo executada na interface do serviço." width="800" height="321" /> fonte: https://n8n.io/features/[/caption]
<p> </p>
<h2><strong>Exemplos de utilização do n8n</strong></h2>
<ol>
<li>
<h3><strong> Automação de Marketing</strong></h3>
</li>
</ol>
<p><span style="font-weight: 400">Imagine uma empresa que deseja automatizar o envio de e-mails personalizados para clientes que preencheram um formulário no site. Com o n8n, é possível criar um fluxo de trabalho que:</span></p>
<ol>
<li style="font-weight: 400"><span style="font-weight: 400">Coleta os dados do formulário (por exemplo, via Google Forms).</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Armazena as informações em uma planilha do Google Sheets.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Envia um e-mail personalizado usando serviços como SendGrid ou Mailchimp.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Atualiza o CRM (por exemplo, Salesforce) com os dados do novo lead.</span></li>
</ol>
<p><span style="font-weight: 400">Tudo isso pode ser feito sem escrever uma única linha de código, apenas configurando os nós correspondentes na interface do n8n.</span></p>
<ol start="2">
<li>
<h3><strong> Integração de Sistemas</strong></h3>
</li>
</ol>
<p><span style="font-weight: 400">Muitas empresas utilizam múltiplas ferramentas que não se comunicam entre si. Por exemplo, uma loja online pode usar o Shopify para gerenciar vendas, o Trello para acompanhar tarefas e o Slack para comunicação interna. Com o n8n, é possível criar um fluxo de trabalho que:</span></p>
<ol>
<li style="font-weight: 400"><span style="font-weight: 400">Monitora novas vendas no Shopify.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Cria automaticamente uma tarefa no Trello para a equipe de logística</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Envia uma notificação no Slack com os detalhes da venda.</span></li>
</ol>
<p><span style="font-weight: 400">Essa integração elimina a necessidade de inserir manualmente dados em diferentes sistemas, reduzindo erros e economizando tempo.</span></p>
<ol start="3">
<li>
<h3><strong>Processamento de Dados</strong></h3>
</li>
</ol>
<p><span style="font-weight: 400">Para empresas que lidam com grandes volumes de dados, o n8n pode ser usado para automatizar tarefas repetitivas, como a coleta, transformação e análise de informações. Por exemplo, um fluxo de trabalho pode:</span></p>
<ol>
<li style="font-weight: 400"><span style="font-weight: 400">Coletar dados de uma API externa.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Filtrar e transformar os dados conforme necessário</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Armazenar os resultados em um banco de dados ou gerar relatórios automáticos.</span></li>
</ol>
<p> </p>
<h2><strong>Como Funciona?</strong></h2>
<p><span style="font-weight: 400">O n8n oferece um nó chamado "Function" (Função) ou "Code" (Código), onde o usuário pode escrever scripts personalizados. Esses nós permitem manipular dados, realizar cálculos complexos ou até mesmo integrar bibliotecas externas. Por exemplo:</span></p>
<ul>
<li style="font-weight: 400"><span style="font-weight: 400"><strong>Manipulação de Dados:</strong> Se você recebe dados de uma API em um formato que precisa ser transformado antes de ser processado, pode usar um nó de código para reformatar os dados.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400"><strong>Cálculos Personalizados:</strong> Para realizar operações matemáticas ou lógicas que não estão disponíveis nos nós padrão, um script personalizado pode ser a solução.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400"><strong>Integração com Bibliotecas Externas:</strong> Em alguns casos, você pode precisar de funcionalidades específicas de bibliotecas de terceiros. Com os nós de código, é possível importar e utilizar essas bibliotecas diretamente no fluxo de trabalho.</span></li>
</ul>
<p> </p>
<h2><strong>Utilização de Agentes de IA no n8n</strong></h2>
<p><span style="font-weight: 400">A integração de inteligência artificial (IA) em fluxos de trabalho automatizados está se tornando cada vez mais comum, e o n8n não fica para trás. A plataforma permite a integração com serviços de IA, como OpenAI (GPT), Hugging Face, ou até mesmo modelos personalizados, por meio de nós específicos ou APIs. Isso abre um leque de possibilidades para automações inteligentes e processos que envolvem análise de linguagem natural, geração de texto, classificação de dados e muito mais.</span></p>
<p><span style="font-weight: 400">O n8n oferece nós pré-configurados para integração com serviços de IA, como o OpenAI Node, que permite interagir diretamente com modelos como o GPT-3 ou GPT-4. Além disso, você pode usar nós de código ou APIs personalizadas para integrar outros modelos de IA, como os disponíveis no Hugging Face ou até mesmo modelos treinados internamente pela sua empresa.</span></p>
[caption id="attachment_3584" align="aligncenter" width="1024"]<img class="wp-image-3584 size-large" src="https://www.ufsm.br/app/uploads/sites/791/2025/02/image3-1024x487.jpg" alt="Exemplo de um atomação/workflow em edição na interface do n8n" width="1024" height="487" /> Exemplo de um chatbot para agendamentos no google calendar utilizando o agente de IA do n8n.[/caption]
<p> </p>
<h2><strong>Conclusão</strong></h2>
<p><span style="font-weight: 400">O n8n é uma ferramenta poderosa e versátil que democratiza a automação de fluxos de trabalho, tornando-a acessível para empresas de todos os tamanhos. Sua combinação de flexibilidade, custo-efetividade e facilidade de uso a torna uma excelente opção para quem busca otimizar processos sem depender de equipes de desenvolvimento especializadas. À medida que a automação se torna cada vez mais crucial no mundo dos negócios, ferramentas como o n8n estão pavimentando o caminho para uma nova era de eficiência e inovação.</span></p>
<p><span style="font-weight: 400">Se você está procurando uma maneira de simplificar operações complexas e integrar sistemas de forma eficiente, o n8n certamente merece uma chance. Com sua abordagem low code e open source, ele oferece o melhor dos dois mundos: poder e acessibilidade.</span></p>
<p style="text-align: right"><strong>Autor: Felipe Colpo Bagesteiro</strong></p>
<!-- /wp:tadv/classic-paragraph -->

<!-- wp:tadv/classic-paragraph /-->]]></content:encoded>
													</item>
						<item>
				<title>CODECS</title>
				<link>https://www.ufsm.br/pet/sistemas-de-informacao/2021/10/29/codecs</link>
				<pubDate>Fri, 29 Oct 2021 17:14:21 +0000</pubDate>
						<category><![CDATA[Destaques]]></category>
		<category><![CDATA[Redações]]></category>
		<category><![CDATA[ferramentas]]></category>

				<guid isPermaLink="false">https://www.ufsm.br/pet/sistemas-de-informacao/?p=3239</guid>
						<description><![CDATA[Eaí pessoal, tudo tranquilo? Você já ouviu falar alguma vez por aí em Codec? Codec é uma maneira de compressão e descompressão de arquivos, geralmente os de áudio e vídeo, como na internet não existe só uma maneira de compressão e sim centenas, cada uma adotando uma técnica diferente. Hoje iremos abordar um contexto geral [&hellip;]]]></description>
							<content:encoded><![CDATA[  <!-- wp:tadv/classic-paragraph -->
<p class="western" lang="en-US"><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR">Eaí pessoal, tudo tranquilo?</span></span></span></p>
<p class="western" lang="en-US"><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR">Você já ouviu falar alguma vez por aí em Codec? Codec é uma maneira de compressão e descompressão de arquivos, geralmente os de áudio e vídeo, como na internet não existe só uma maneira de compressão e sim centenas, cada uma adotando uma técnica diferente. Hoje iremos abordar um contexto geral e como elas funcionam.</span></span></span></p>
<p class="western" lang="en-US"><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR">Primeiro vamos começar entendo como funciona a nossa tela. A nossa tela é formada por pixels, que nada mais do que uma matriz que armazena 3 valores </span></span></span><span style="color: #ff0000"><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR">R = red</span></span></span></span><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR">, </span></span></span><span style="color: #00b050"><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR">G = green</span></span></span></span><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR">, </span></span></span><span style="color: #0070c0"><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR">B = blue,</span></span></span></span><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR"> 2</span></span></span><sup><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR">8 </span></span></span></sup><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR">ou 256 cores diferentes, quando os 3 valores são combinados em cada pixel temos 2</span></span></span><sup><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR">8x3</span></span></span></sup><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR"> o que dá em torno de 16 milhões de cores diferentes.</span></span></span></p>
<p class="western"><img class="aligncenter wp-image-3245 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2021/10/WhatsApp-Image-2021-10-29-at-14.04.22.jpeg" alt="" width="240" height="210" /><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR"><br />Agora que já sabemos como funciona a nossa tela vamos fazer um cálculo de quanto pesa uma imagem em FULL HD sem compressão, apenas com os pixels da tela. 1080 x 1920 x 24 = 49766400 bits, e fazendo as conversões de armazenamento, dariam 6MB em apenas uma imagem.</span></span></span></p>
<p class="western" lang="en-US"><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR">Agora e se for 1 segundo? Em um segundo são passadas 30 imagens, logo 6 x 30 = 180MB.</span></span></span></p>
<p class="western" lang="en-US"><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR">E por fim em 1 minuto um vídeo pesaria 11 Gb.</span></span></span></p>
<p class="western" lang="en-US"><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR">Para isso os codecs surgiram de uma necessidade de reduzir o tamanho dos arquivos de áudio e vídeo, pois os arquivos seriam enormes e levariam dias ou até semanas para transportar vídeos ou filmes.</span></span></span></p>
<p class="western" lang="en-US"><img class="aligncenter wp-image-3241 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2021/10/WhatsApp-Image-2021-10-29-at-14.04.23.jpeg" alt="" width="800" height="298" /></p>
<p class="western" lang="en-US"><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR">Como dito, o processo de compressão dos arquivos possui várias etapas com elas:</span></span></span></p>
<ul>
<li>
<p lang="en-US"><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR"><b>Codecs de Captura: </b></span></span></span><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR">Este processo começa já nas câmeras fotográficas que entre elas possuem diferentes modos de compressão.</span></span></span></p>
</li>
</ul>
<ol>
<li>
<p lang="en-US"><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR">O método </span></span></span><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR"><b>4:4:4</b></span></span></span><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR"> é melhor existente, pois dentro de 4 pixels, todos eles terão o seu valor original, nenhuma informação da cor é perdida, então a qualidade é melhor ao custo de mais informação.</span></span></span></p>
</li>
</ol>
<p lang="en-US"><img class="aligncenter wp-image-3244 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2021/10/WhatsApp-Image-2021-10-29-at-14.04.22-1.jpeg" alt="" width="1280" height="894" /></p>
<p> </p>
<ol start="2">
<li>
<p lang="en-US"><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR">Mas alguns codecs reduzem isso como por exemplo o método </span></span></span><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR"><b>4:2:2, </b></span></span></span><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR">que consiste em num raio de 4 pixels, 2 terão o seu valor trocado pelo próximo, o que ocasiona em uma grande redução de espaço, ao custo de perder qualidade.</span></span></span></p>
</li>
</ol>
<p class="western" lang="en-US"><img class="aligncenter wp-image-3243 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2021/10/WhatsApp-Image-2021-10-29-at-14.04.22-2.jpeg" alt="" width="1280" height="862" /></p>
<ol start="3">
<li>
<p lang="en-US" align="justify"><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR">Por fim, existe o método que mais reduz espaço e perde informação o </span></span></span><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR"><b>4:2:0, </b></span></span></span><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR">que é um dos mais utilizados por celulares e câmeras, o qual dos 4 pixels, apenas 1 terá o seu valor original de cor.</span></span></span></p>
</li>
</ol>
<p class="western" lang="en-US"><img class="aligncenter wp-image-3242 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2021/10/WhatsApp-Image-2021-10-29-at-14.04.22-3.jpeg" alt="" width="1280" height="872" /></p>
<ul>
<li>
<p lang="en-US"><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR"><b>Codecs de edição</b></span></span></span><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR">: Agora que já passamos pelas partes de captura, vamos para a parte de edição, onde os nossos computadores agem ou alguns outros aparelhos fotográficos.</span></span></span></p>
</li>
</ul>
<p lang="en-US"><img class="aligncenter wp-image-3246 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2021/10/WhatsApp-Image-2021-10-29-at-14.04.21.jpeg" alt="" width="500" height="500" /></p>
<p class="western" lang="en-US"><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR"><b>Compressão com perdas: </b></span></span></span><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR">O método de compressão com perdas reduz o formato do arquivo a ponto de estar num estado mínimo em que o ouvido e o olho humano não percebam, pois, esses tipos de codificadores removem apenas os ruídos que são imperceptíveis.</span></span></span></p>
<p class="western" lang="en-US"><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR"><b>Compressão sem perdas:</b></span></span></span><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR"> Esse método como o próprio nome diz não há perdas significativas, mas não quer dizer que não comprimem nada, pois reduzem poucas partes do arquivo original.</span></span></span></p>
<p class="western" lang="en-US"><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR"><b>Conclusão: </b></span></span></span><span style="font-family: Arial, serif"><span style="font-size: medium"><span lang="pt-BR">Existem diversos processos até os arquivos de áudio e vídeo chegarem ao nosso aparelho. Por isso se você curte estudar edição ou gravação, é importante ficar ligado nesses processos para o melhor entendimento do seu sistema.</span></span></span></p>
<p lang="en-US"> </p>
<p style="text-align: right">- Luís Corrêa</p>
<!-- /wp:tadv/classic-paragraph -->]]></content:encoded>
													</item>
						<item>
				<title>Elasticsearch (ELK)</title>
				<link>https://www.ufsm.br/pet/sistemas-de-informacao/2021/06/08/elasticsearch-elk</link>
				<pubDate>Tue, 08 Jun 2021 19:48:15 +0000</pubDate>
						<category><![CDATA[Destaques]]></category>
		<category><![CDATA[Redações]]></category>
		<category><![CDATA[ferramentas]]></category>

				<guid isPermaLink="false">https://www.ufsm.br/pet/sistemas-de-informacao/?p=3162</guid>
						<description><![CDATA[E aí pessoal, tudo certo? No PET Redação de hoje vamos falar sobre Elasticsearch, que nada mais é do que um mecanismo de busca e análise de dados distribuído, gratuito e aberto para todos os tipos de dados, incluindo textuais, numéricos, geoespaciais, estruturados e não estruturados. O Elasticsearch é desenvolvido sobre o Apache Lucene (uma [&hellip;]]]></description>
							<content:encoded><![CDATA[  <!-- wp:tadv/classic-paragraph -->
<p style="text-align: left"><img class="aligncenter wp-image-3161 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2021/06/elastic_destac.jpg" alt="elastic" width="600" height="210" /></p>
<p><span style="font-weight: 400">E aí pessoal, tudo certo? No PET Redação de hoje vamos falar sobre </span><b>Elasticsearch</b><span style="font-weight: 400">, que nada mais é do que um mecanismo de busca e análise de dados distribuído, gratuito e aberto para todos os tipos de dados, incluindo textuais, numéricos, geoespaciais, estruturados e não estruturados.</span></p>
<p style="text-align: left"><span style="font-weight: 400">O Elasticsearch é desenvolvido sobre o Apache Lucene (</span><span style="font-weight: 400">uma biblioteca de software de mecanismo de pesquisa gratuita e de código aberto, originalmente escrita completamente em Java</span><span style="font-weight: 400">) e foi lançado pela primeira vez em 2010 pela Elasticsearch N.V. (agora conhecida como Elastic). Este mecanismo é conhecido por suas REST APIs simples, natureza distribuída, velocidade e escalabilidade, o Elasticsearch é o componente central do Elastic Stack, um conjunto de ferramentas gratuitas e abertas para ingestão, enriquecimento, armazenamento, análise e visualização de dados. Comumente chamado de ELK Stack (pelas iniciais de Elasticsearch, Logstash e Kibana).</span></p>
<p><img class="aligncenter wp-image-3160 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2021/06/ELK-1.png" alt="elk" width="600" height="200" /></p>
<p style="text-align: left"><b>ELK:</b></p>
<ul style="text-align: left">
<li><b>Elasticsearch: </b><span style="font-weight: 400">O Elasticsearch é o mecanismo de busca e análise de dados propriamente dito.<br /><br /></span></li>
<li><b>Logstash: </b><span style="font-weight: 400">O Logstash é um pipeline gratuito e aberto de processamento de dados do lado do servidor que faz a ingestão de dados de inúmeras fontes. É usado para agregar e processar dados e enviá-los ao Elasticsearch.<br /><br /></span></li>
<li><b>Kibana: </b><span style="font-weight: 400">O Kibana é uma ferramenta de visualização e gerenciamento de dados de fonte aberta para o Elasticsearch. Ele fornece recursos de visualização (histogramas, diferentes tipos de gráficos, mapas, entre outros...) em cima do conteúdo indexado em um cluster Elasticsearch.</span></li>
</ul>
<h3 style="text-align: left"><b>Para que o Elasticsearch é usado?</b></h3>
<p style="text-align: left"><span style="font-weight: 400">A velocidade e escalabilidade do Elasticsearch e sua capacidade de indexar muitos tipos de conteúdo significam que ele pode ser usado para inúmeros casos, principalmente entre os seguintes:</span></p>
<ul style="text-align: left">
<li style="font-weight: 400"><span style="font-weight: 400">Busca em aplicação e websites</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Métricas de infraestrutura e monitoramento de container</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">APM (Monitoramento de performance de aplicação)</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Análise e visualização de dados geoespaciais</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Analítica de segurança e de dados empresariais</span></li>
</ul>
<h3 style="text-align: left"><b>Como o Elasticsearch funciona?</b></h3>
<p style="text-align: left"><span style="font-weight: 400">Os dados brutos fluem para a plataforma de diversas fontes diferentes, incluindo logs, metrics de sistema e aplicações web. A ingestão de dados é o processo pelo qual os dados brutos são analisados, tratados e enriquecidos antes de serem indexados no Elasticsearch. Após a indexação, os usuários podem executar consultas complexas com base em seus dados e recuperar resumos complexos dos dados. Através do Kibana, os usuários podem criar visualizações avançadas das informações, compartilhar dashboards e gerenciar os seus dados.</span></p>
<h3 style="text-align: left"><b>O que é um índice do Elasticsearch?</b></h3>
<p style="text-align: left"><span style="font-weight: 400">Um índice do Elasticsearch é um conjunto de documentos que estão relacionados entre si. Este mecanismo armazena dados como documentos JSON. Cada documento correlaciona um conjunto de chaves (nomes de campos ou propriedades) aos seus valores correspondentes (strings, números, booleanos, datas, matrizes de valores, geolocalização, etc).</span></p>
<p style="text-align: left"><span style="font-weight: 400">O Elasticsearch usa uma estrutura de dados chamada índice invertido, que é projetada para permitir buscas de texto muito rápidas. Um índice invertido lista cada palavra exclusiva que apareça em qualquer documento e identifica todos os documentos em que cada palavra aparece.</span></p>
<p style="text-align: left"><span style="font-weight: 400">Durante o processo de indexação, o Elasticsearch armazena documentos e desenvolve um índice invertido para tornar os dados dos documentos buscáveis praticamente em tempo real. A indexação é iniciada com a API de índice, pela qual você pode adicionar ou atualizar um documento JSON em um índice específico.</span></p>
<p style="text-align: left"><img class="aligncenter wp-image-3159 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2021/06/image-1.jpg" alt="elk explicação" width="1546" height="853" /></p>
<h3 style="text-align: left"><b>Por que usar o Elasticsearch?</b></h3>
<p style="text-align: left"><b>O Elasticsearch é rápido</b><span style="font-weight: 400">. Como o Elasticsearch é desenvolvido sobre o Lucene, ele fica insuperável em busca de textos. acontecendo praticamente em tempo real, isso significa que a latência do momento em que um documento é indexado até que ele se torne buscável é muito pequena.</span></p>
<p style="text-align: left"><b>O Elasticsearch é distribuído de fábrica</b><span style="font-weight: 400">. Os documentos armazenados na plataforma são distribuídos em diferentes containers conhecidos como shards, que são duplicados para oferecer cópias redundantes dos dados em caso de falha de hardware. A natureza distribuída do Elasticsearch permite fazer a escalabilidade horizontal para centenas (talvez milhares) de servidores e manipular petabytes de dados.</span></p>
<p style="text-align: left"><b>O Elasticsearch é fornecido com um amplo conjunto de recursos.</b><span style="font-weight: 400"> Além da velocidade, escalabilidade e resiliência, o ELK tem inúmeros recursos integrados avançados que tornam o armazenamento e a busca de dados ainda mais eficiente, como o gerenciamento do ciclo de vida de índices.</span></p>
<p style="text-align: left"><b>O Elastic Stack (ELK) simplifica a ingestão, a visualização e os relatórios de dados</b><span style="font-weight: 400">. As integrações facilitam o processamento dos dados antes de indexar ao Elasticsearch. O Kibana fornece visualização em tempo real dos dados, além de interfaces para acessar rapidamente os dados de APM (monitoramento de performance de aplicação), de logs e de metrics de infraestrutura.</span></p>
<p style="text-align: left"><span style="font-weight: 400"><strong><br />Referências</strong>:</span></p>
<ul style="text-align: left">
<li style="font-weight: 400"><a href="https://github.com/deviantony/docker-elk"><span style="font-weight: 400">https://github.com/deviantony/docker-elk</span></a></li>
<li style="font-weight: 400"><a href="https://www.udemy.com/course/elasticsearch-complete-guide/"><span style="font-weight: 400">https://www.udemy.com/course/elasticsearch-complete-guide/</span></a><span style="font-weight: 400"> </span></li>
<li style="font-weight: 400"><a href="https://www.elastic.co/pt/what-is/elk-stack"><span style="font-weight: 400">https://www.elastic.co/pt/what-is/elk-stack</span></a><span style="font-weight: 400"> </span></li>
</ul>
<p style="text-align: right"><span style="color: #000000"><strong><a style="color: #000000" href="https://www.linkedin.com/in/ricardorohrs/">Ricardo Röhrs</a></strong></span></p>
<!-- /wp:tadv/classic-paragraph -->]]></content:encoded>
													</item>
						<item>
				<title>Photoshop</title>
				<link>https://www.ufsm.br/pet/sistemas-de-informacao/2020/09/02/photoshop</link>
				<pubDate>Wed, 02 Sep 2020 18:40:00 +0000</pubDate>
						<category><![CDATA[Destaques]]></category>
		<category><![CDATA[Redações]]></category>
		<category><![CDATA[ferramentas]]></category>

				<guid isPermaLink="false">https://www.ufsm.br/pet/sistemas-de-informacao/?p=2708</guid>
						<description><![CDATA[Eai pessoal, nesta edição do PET Redação iremos apresentar um guia rápido (quick guide) de Photoshop da maneira mais descontraída possível, visando servir de base para quem quer desenvolver artes, editar imagens, vídeos (mentira, não abordaremos vídeos nessa redação, mas, você sabia que também podemos editar vídeos nele? Inusitado, não?) Para começar, abra o Photoshop [&hellip;]]]></description>
							<content:encoded><![CDATA[  <!-- wp:tadv/classic-paragraph -->
<section id="h.67e109358f3001ff_8" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.67e109358f3001ff_5" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Eai pessoal, nesta edição do PET Redação iremos apresentar um guia rápido (quick guide) de Photoshop da maneira mais descontraída possível, visando servir de base para quem quer desenvolver artes, editar imagens, vídeos (mentira, não abordaremos vídeos nessa redação, mas, você sabia que também podemos editar vídeos nele? Inusitado, não?)</p>
<p class="zfr3Q" dir="ltr">Para começar, abra o Photoshop que você tem instalado aí, o basicão não muda quase nada de versão pra versão, o que muda bastante são os recursos 3d, texturas, e muitos outros recursos avançados. Pra quem não tem uma licença e não curte uma pirataria recomendo o PIXLR, basta acessar este <span class=" aw5Odc"><a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fpixlr.com%2Fbr%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNF6EpDwYs4asBsALgD2tzhYAmcNBQ" target="_blank" rel="noopener noreferrer">link</a></span> e selecionar o <em>PIXLR E - EDITOR AVANÇADO</em>, ou, clicar neste outro <span class=" aw5Odc"><a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fpixlr.com%2Fbr%2Fe%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNElg5ssNHZ99XtK4vDBsH0gPr7RNA" target="_blank" rel="noopener noreferrer">link</a></span>. O PIXLR não oferece tuuuuuuudo que o Photoshop tras, porém, é online, totalmente de graça e da pra fazer muuuuuuuita coisa com ele, como por exemplo, a capa dessa redação aí em cima, ela foi feita tanto no Photoshop quando no PIXRL.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.67e109358f3001ff_12" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-c5RTEf purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.67e109358f3001ff_13" class="hJDwNd-AhqUyc-c5RTEf purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Aqui do lado temos a carinha dele.<img class=" wp-image-2983 alignright" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/photoshop1-300x160.jpg" alt="" width="573" height="306" /></p>
<p class="zfr3Q" dir="ltr">Logo logo você irá ver quais são as principais ferramentas para edições básicas, na minha opinião, é claro</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-Clt0zb purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.67e109358f3001ff_9" class="hJDwNd-AhqUyc-Clt0zb jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.67e109358f3001ff_20" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.67e109358f3001ff_17" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p dir="ltr"> </p>
<p dir="ltr"> </p>
<p dir="ltr"> </p>
<p class="zfr3Q" dir="ltr">Agora que você já sabe onde fica o menu superior (por mais óbvio que pareça...), vamos aprender a criar um arquivo, clique em <strong>file</strong> -&gt; <strong>new</strong>, ou <strong>CTRL + N</strong>.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.67e109358f3001ff_24" class="yaqOZd">
<div class="yaqOZd IFuOkc"><img class="wp-image-2984 alignleft" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/photoshop2-300x212.png" alt="" width="532" height="376" /></div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-OiUrBf purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.67e109358f3001ff_21" class="hJDwNd-AhqUyc-OiUrBf jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-II5mzb purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.67e109358f3001ff_25" class="hJDwNd-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Primeiramente temos o nome do arquivo, o tipo do documento (use Custom).</p>
<p class="zfr3Q" dir="ltr">A seguir a largura, altura, resolução e modo de cor, na resolução pode deixar 300 (mas quanto maior mais pesada fica a img final), e o modo de cor pode ser (RGB, preto e branco, escala de cinza, ...).</p>
<p class="zfr3Q" dir="ltr">O conteúdo de background pode variar desde transparente (como na foto), cores sólidas e até degradê.</p>
<p class="zfr3Q" dir="ltr">Pode deixar a aba advanced bem do jeito que estiver!</p>
</div>
<p dir="ltr"> </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.67e109358f3001ff_32" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.67e109358f3001ff_29" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p dir="ltr"> </p>
<p class="zfr3Q" dir="ltr">Abaixo, as ferramentas mais úteis da barra lateral:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.67e109358f3001ff_40" class="yaqOZd">
<div class="yaqOZd IFuOkc"><img class="wp-image-2985 alignleft" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/photoshop3-274x300.png" alt="" width="374" height="409" /></div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-wNfPc purZT-AhqUyc-II5mzb pSzOP-AhqUyc-wNfPc JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.67e109358f3001ff_37" class="hJDwNd-AhqUyc-wNfPc pSzOP-AhqUyc-wNfPc jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-OwsYgb purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.67e109358f3001ff_41" class="hJDwNd-AhqUyc-OwsYgb jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">As ferramentas da imagem ao lado estão bem explicadas, pois são básicas, simples de usar, mas apenas utilizando elas se pode fazer muita coisa, como a capa utilizada nessa redação, por exemplo.</p>
<p class="zfr3Q" dir="ltr">Para aproveitar o gancho do básico, vamos ver uns comandos legais?</p>
<p class="zfr3Q" dir="ltr">Zoom: <strong>CTRL +</strong> e <strong>CTRL - </strong>para aumentar e diminuir o zoom.</p>
<p class="zfr3Q" dir="ltr">Redimensionar: <strong>CTRL + T </strong>e arraste como desejar, se manter o <strong>SHIFT</strong> pressionado, ela mantém a proporção (pode usar ele pra espelhar algo também, mantendo o <strong>SHIFT</strong> pressionado e invertendo os lados).</p>
<p class="zfr3Q" dir="ltr">Fora os atalhos normais <strong>CTRL + C</strong>, <strong>CTRL + V</strong>, <strong>CTRL + X</strong>, ...</p>
<p class="zfr3Q" dir="ltr">Confira mais atalhos aqui neste <span class=" aw5Odc"><a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fhelpx.adobe.com%2Fbr%2Fphotoshop%2Fusing%2Fdefault-keyboard-shortcuts.html&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNF5cJZBKROV1iqpCkeyEiLgfo8c9w" target="_blank" rel="noopener noreferrer">link</a></span>.</p>
<p dir="ltr"> </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.67e109358f3001ff_52" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.67e109358f3001ff_49" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Na imagem abaixo observem que o canto da logo do PET-SI está transparente, sobrepondo a imagem de fundo (Lago), isso se dá pelo campo <strong>opacity</strong> em<strong> 32%</strong>, ali no canto direito, a logo do PET = <strong>Layer 1</strong> só está visível pois está acima da<strong> Layer 0</strong>, se inverte-las, a logo ficará escondida atrás do Lago. Logo, quanto mais acima, mais a prioridade de visualização. Agora você já sabe um pouco sobre as Layers, ou melhor, <strong>camadas</strong>.</p>
<p class="zfr3Q" dir="ltr">Caso queira unir todas as camadas de sua imagem, basta clicar com o botão direito do mouse sobre uma das camadas e clicar em <strong>Merge Visible</strong> (uma das últimas opções), assim, terá uma imagem única, caso tenha várias camadas e queira unir apenas algumas vá na mais "de cima" e vá clicando em <strong>Merge Down</strong>, até obter o resultado que quer.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.67e109358f3001ff_48" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.67e109358f3001ff_45" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="wp-image-2986 aligncenter" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/photoshop4-300x67.jpg" alt="" width="757" height="169" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.67e109358f3001ff_56" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.67e109358f3001ff_53" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Aproveitando a foto acima, ali na esquerda de <strong>opacity</strong>, tem o <strong>Normal</strong>, ali você ir trocando o "modo" a camada, tem várias opções legais, vá testando e vendo quando você pode usar cada uma! Dica: com a camada selecionada, basta usar o <strong>SHIFT +</strong> e <strong>SHIFT - </strong>para ir navegando pelos efeitos.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.67e109358f3001ff_60" class="yaqOZd">
<div class="yaqOZd IFuOkc"><img class="wp-image-2987 alignright" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/photoshop5-300x220.jpg" alt="" width="476" height="349" /></div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-qWD73c purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.67e109358f3001ff_61" class="hJDwNd-AhqUyc-qWD73c jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">No Photoshop, o famoso <strong>CRTL + Z</strong> tem um comportamento um pouco diferente. Na maioria dos softwares, dando esse comando inúmeras vezes, você volta inúmeros passos, no PS se você der <strong>CRTL + Z</strong> várias vezes, você ira ficar trocando entre a versão atual e a versão anterior (sim, ele volta um passo, e volta pra como estava antes kkkkkkk).</p>
<p class="zfr3Q" dir="ltr">Para isto, temos A MELHOR FERRAMENTA, o histórico, basta clicar naquele ícone do lado direito, com na imagem ao lado, assim vocÊ terá todo histórico de alteração da imagem, logo, basta selecionar o passo no qual você pretende voltar.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-qWD73c purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.67e109358f3001ff_57" class="hJDwNd-AhqUyc-qWD73c jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.67e109358f3001ff_68" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.67e109358f3001ff_65" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p dir="ltr"> </p>
<p class="zfr3Q" dir="ltr">Se você parar pra pensar, você já sabe muita coisa sobre Photoshop, para melhorar suas habilidades basta praticar, editando imagens, criando artes, e etc. Vá aos poucos descobrindo as outras ferramentas da barra lateral (Confiram o <strong>clone stamp tool</strong>, ele clona partes que você quer de uma imagem em outro lugar) pode ajudar você a tirar espinhas de fotos, clonando uma pele saudável sobre a espinha, pode esconder defeitos em qualquer textura da imagem e etc.</p>
<p class="zfr3Q" dir="ltr">Espero que a redação tenha sido agradável de ler e que você tenham aproveitado bastante, abraço e até a próxima.</p>
<p class="zfr3Q" dir="ltr" style="text-align: right">Claiton</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- /wp:tadv/classic-paragraph -->]]></content:encoded>
													</item>
						<item>
				<title>NPM para iniciantes</title>
				<link>https://www.ufsm.br/pet/sistemas-de-informacao/2020/03/10/npm-para-iniciantes</link>
				<pubDate>Tue, 10 Mar 2020 20:05:00 +0000</pubDate>
						<category><![CDATA[Destaques]]></category>
		<category><![CDATA[Redações]]></category>
		<category><![CDATA[ferramentas]]></category>
		<category><![CDATA[Web e Front-End]]></category>

				<guid isPermaLink="false">https://www.ufsm.br/pet/sistemas-de-informacao/?p=2674</guid>
						<description><![CDATA[Ao iniciar um novo projeto para Web, é comum esbarrar em problemas complicados, mas com soluções proporcionadas por frameworks ou pacotes independentes facilmente encontrados na primeira pesquisa realizada na internet. Conforme os projetos crescem em dimensão e o número de módulos aumenta, a organização desses pacotes pode se tornar um verdadeiro desafio. O que fazer quando isso acontece? [&hellip;]]]></description>
							<content:encoded><![CDATA[  <!-- wp:tadv/classic-paragraph -->
<p class="c1"><span class="c3">Ao iniciar um novo projeto para </span><span class="c3 c13">Web</span><span class="c3">, é comum esbarrar em problemas complicados, mas com soluções proporcionadas por </span><span class="c3 c13">frameworks</span><span class="c7 c3"> ou pacotes independentes facilmente encontrados na primeira pesquisa realizada na internet. Conforme os projetos crescem em dimensão e o número de módulos aumenta, a organização desses pacotes pode se tornar um verdadeiro desafio. O que fazer quando isso acontece?</span></p>
<p class="c1"><span class="c3">Desde a criação do </span><span class="c6 c3 c13"><a class="c8" href="https://www.google.com/url?q=https://nodejs.org&amp;sa=D&amp;ust=1584220289166000">Node.js</a></span><span class="c3">, o processo de desenvolvimento de software para </span><span class="c3 c13">Web</span><span class="c3"> passou por uma transformação significativa, principalmente na modularização e distribuição das dependências utilizadas nos projetos. Com o crescimento do </span><span class="c3 c13">Node</span><span class="c3">, um novo gerenciador de pacotes foi criado, chamado </span><span class="c3 c13">Node Package Manager</span><span class="c3">.  Com ele, o manejo de dependências , </span><span class="c7 c3">antes feito manualmente e passível de muitos erros, passou a ser automatizado, facilitando o trabalho.</span></p>
<p class="c1"><span class="c3">Nesse tutorial, você irá aprender a utilizar o </span><span class="c24 c13">Node Package Manager</span><span class="c3"> (</span><span class="c24">npm</span><span class="c3">), um gerenciador de pacotes para a linguagem de programação </span><span class="c3 c13">JavaScript</span><span class="c7 c3">. Iremos aprender o básico sobre o funcionamento da ferramenta, entendendo seus principais componentes e como a ferramenta é mais utilizada. Além disso, também  iremos nos aventurar publicando o nosso próprio pacote.</span></p>
<p class="c16"><span class="c7 c3">        </span></p>
<img class="aligncenter" title="" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/db/Npm-logo.svg/1920px-Npm-logo.svg.png" alt="" />
<pre class="c17" style="text-align: center"><span class="c12 c3 c43">Logo oficial do Node Package Manager (npm)</span></pre>
<p class="c16 c9"> </p>
<p class="c16"><strong><span class="c12 c3 c4">O que é, de onde vem e o que ele faz?</span></strong></p>
<p class="c1"><span class="c3">Sendo disponibilizado oficialmente junto ao </span><span class="c3 c13">Node.js</span><span class="c3">, o npm é um gerenciador de pacotes criado para a linguagem de programação </span><span class="c3 c13">JavaScript</span><span class="c3">. Foi em janeiro de 2010 que Isaac Z. Schlueter, buscando solucionar a maneira extremamente desorganizada de que os módulos eram incluídos nos projetos do qual já tinha trabalhado, lançou a versão inicial da ferramenta.</span></p>
<p class="c1"><span class="c3">Essa ferramenta</span><span class="c3"> permite que os desenvolvedores que trabalham com a </span><span class="c3 c13">Web</span><span class="c3"> possam publicar facilmente seus projetos, e que outros desenvolvedores possam ter acesso à esses códigos de forma rápid</span><span class="c3">a</span><span class="c3"> e gratuita. Não se limitando a isso, com o passar do tempo, várias outras funcionalidades também são oferecidas pela npm, como utilizar pacotes sem realizar o seu </span><span class="c3 c13">download</span><span class="c7 c3"> e até mesmo compartilhar os pacotes com organizações ou grupos específicos.</span></p>
<p class="c1"><span class="c3">Pode-se dividir o npm entre três componentes: </span><span class="c24">registro</span><span class="c3">, </span><span class="c24 c13">website</span><span class="c3"> e </span><span class="c24 c13">command-line interface</span><span class="c24"> (CLI)</span><span class="c3">, ou em português, interface de linha de comando.</span></p>
<ol class="c35 lst-kix_ajf6wp8lgj5i-0 start" start="1">
<li class="c5 c19"><strong><span class="c24">Registro</span></strong><span class="c7 c3">: é um grande banco de dados públicos de software JavaScript, onde são mantidos os pacotes publicados através do npm;</span></li>
<li class="c5 c19"><strong><span class="c24">Website</span></strong><span class="c3">: possibilita a navegação pelo acervo do</span><span class="c24"> registro</span><span class="c7 c3">, permitindo encontrar novos pacotes, configurar seu perfil pessoal do npm, criar organizações (possibilitando a publicação de pacotes privados e públicos), e outras funções;</span></li>
<li class="c5 c19"><strong><span class="c24">Command-line</span><span class="c24"> interface</span></strong><span class="c7 c3">: é a interface de linha de comando a qual o desenvolvedor irá utilizar os comandos disponíveis pelo npm, podendo realizar o download, criação, remoção e até mesmo atualização de pacotes.</span></li>
</ol>
<p class="c1"><strong><span class="c7 c3">Mas afinal, o que são exatamente esses pacotes?</span></strong></p>
<p class="c1"><span class="c3">Esses pacotes, também chamados de módulos, são geralmente soluções de problemas particulares, ou seja, projetos pequenos que resolvem desafios específicos, como um debugger para </span><span class="c3 c13">JavaScript</span><span class="c3">. A ideia é que cada pacote solucione um problema independente e de forma eficiente, e que assim, o desenvolvedor possa criar soluções customizadas através da combinação desses pequenos módulos. O que caracteriza cada um desses projetos como um pacote npm é seu arquivo </span><span class="c26">package.json</span><span class="c7 c3">.</span></p>
<p class="c5"><span class="c3">        O arquivo</span><span class="c45"> </span><span class="c26">package.json</span><span class="c3"> é como o arquivo de configuração do seu pacote. Nele estarão listadas várias características fundamentais do módulo, detalhando tudo que ele precisa para funcionar junto do npm, como por exemplo: nome, versão, lista de dependências e outras informações. As dependências são as informações mais importantes deste arquivo, pois caso o seu pacote seja publicado e ele dependa de algum outro pacote, como </span><span class="c6 c3 c13"><a class="c8" href="https://www.google.com/url?q=https://lodash.com/&amp;sa=D&amp;ust=1584220289171000">Lodash</a></span><span class="c7 c3">, isso precisa estar descrito na lista de dependências. Caso contrário, as coisas não irão funcionar como deveriam.</span></p>
<p class="c5"><strong><span class="c12 c3 c4">Configurando o ambiente</span></strong></p>
<p class="c5"><span class="c3">        </span><span class="c3">Para começarmos a dar os primeiros passos com o npm, precisamos realizar a instalação da </span><span class="c24">CLI</span><span class="c3"> em nossos computadores. Sendo assim, você precisa basicamente </span><span class="c6 c3"><a class="c8" href="https://www.google.com/url?q=https://nodejs.org/en/download/&amp;sa=D&amp;ust=1584220289172000">instalar o </a></span><span class="c6 c3 c13"><a class="c8" href="https://www.google.com/url?q=https://nodejs.org/en/download/&amp;sa=D&amp;ust=1584220289172000">Node.js</a></span><span class="c7 c3">.</span></p>
<p class="c5"><span class="c3">        Como o npm é distribuído oficialmente com o </span><span class="c3 c13">Node</span><span class="c3">, ao instalá-lo, a </span><span class="c24">CLI</span><span class="c3"> do gerenciador de pacotes já estará pronta para o nosso uso. Caso tenha dúvidas em qual versão instalar, basta seguir as instruções recomendadas no website. Para testar sua instalação, você pode acessar a </span><span class="c24">CLI </span><span class="c7 c3">e utilizar o seguinte comando:</span></p>
<table class="c37">
<tbody>
<tr class="c14">
<td class="c11" colspan="1" rowspan="1">
<p class="c18"><code><span class="c44">    </span><span class="c22">npm --version</span></code></p>
</td>
</tr>
</tbody>
</table>
<p class="c5"><span class="c3">        Ele irá imprimir a versão instalada em seu computador, confirmando que o programa está funcionando. Vamos criar o nosso próprio pacote?</span></p>
<p class="c5"><strong><span class="c12 c3 c4">Criando seu primeiro pacote</span></strong></p>
<p class="c5"><span class="c3 c4">        </span><span class="c3">Neste guia, iremos criar um pacote exemplo com o intuito de aprender a manipular pacotes com o npm. Ele será uma aplicação </span><span class="c3 c13">Node.js</span><span class="c3"> simples, tendo a função de somar</span><span class="c3"> dois números e imprimir sua soma.</span><span class="c3 c4"> </span><span class="c3">Inicialmente, precisamos navegar pela </span><span class="c24">CLI</span><span class="c3"> até a pasta onde nosso projeto será criado. Caso não tenha familiaridade com o uso de terminais </span><span class="c3 c13">Unix-based</span><span class="c3"> e semelhantes, </span><span class="c6 c3"><a class="c8" href="https://www.google.com/url?q=https://computers.tutsplus.com/tutorials/navigating-the-terminal-a-gentle-introduction--mac-3855&amp;sa=D&amp;ust=1584220289176000">esse material</a></span><span class="c3"> pode te ajudar. Uma vez na pasta de nosso projeto, crie um arquivo chamado </span><span class="c26">index.js</span><span class="c7 c3"> e salve o seguinte programa nele:</span></p>
<table class="c37">
<tbody>
<tr class="c14">
<td class="c11" colspan="1" rowspan="1">
<p class="c10"><code><span class="c31">const</span><span class="c0"> </span><span class="c2">chalk</span><span class="c0"> = </span><span class="c34">require</span><span class="c0">(</span><span class="c28">'chalk'</span><span class="c0">); </span><span class="c29 c27">// Módulo que irá auxiliar na impressão de strings</span></code></p>
<p class="c10"><code><span class="c31">const</span><span class="c0"> </span><span class="c2">n1</span><span class="c0"> = +</span><span class="c2">process</span><span class="c0">.</span><span class="c2">argv</span><span class="c0">[</span><span class="c33">2</span><span class="c0">]; </span><span class="c29 c27">// Recebe o primeiro parâmetro do terminal</span></code></p>
<p class="c10"><code><span class="c31">const</span><span class="c0"> </span><span class="c2">n2</span><span class="c0"> = +</span><span class="c2">process</span><span class="c0">.</span><span class="c2">argv</span><span class="c0">[</span><span class="c33">3</span><span class="c0">]; </span><span class="c29 c27">// Recebe o segundo parâmetro do terminal</span></code></p>
<p class="c10"><code><span class="c32">try</span><span class="c0 c27"> {</span></code></p>
<p class="c10"><code><span class="c0">   </span><span class="c32">if</span><span class="c0"> (!</span><span class="c2">n1</span><span class="c0"> || !</span><span class="c2">n2</span><span class="c0">) </span><span class="c29 c27">// Checa se algum dos valores é falso, null, undefined...</span></code></p>
<p class="c10"><code><span class="c0">       </span><span class="c32">throw</span><span class="c0"> </span><span class="c28">'Parâmetros inválidos!'</span><span class="c0 c27">;</span></code></p>
<p class="c10"><code><span class="c0">   </span><span class="c20">console</span><span class="c0">.</span><span class="c34">log</span><span class="c0">(</span><span class="c2">chalk</span><span class="c0">.</span><span class="c2">white</span><span class="c0">.</span><span class="c34">bgBlue</span><span class="c0">(</span><span class="c28">'Soma: '</span><span class="c0"> + (</span><span class="c2">n1</span><span class="c0"> + </span><span class="c2">n2</span><span class="c0">))); </span><span class="c27 c29">// Imprime a soma dos números</span></code></p>
<p class="c10"><code><span class="c0">} </span><span class="c32">catch</span><span class="c0"> (</span><span class="c2">e</span><span class="c0 c27">) {</span></code></p>
<p class="c10"><code><span class="c0">   </span><span class="c20">console</span><span class="c0">.</span><span class="c34">log</span><span class="c0">(</span><span class="c2">chalk</span><span class="c0">.</span><span class="c2">bold</span><span class="c0">.</span><span class="c34">red</span><span class="c0">(</span><span class="c2">e</span><span class="c0">)); </span><span class="c29 c27">// Imprime o erro, caso algum dos valores seja inválido</span></code></p>
<p class="c10"><code><span class="c0">}</span></code></p>
</td>
</tr>
</tbody>
</table>
<p class="c1"><span class="c7 c3">Não se preocupe em entender o código do programa, ele é só um pacote exemplo que estamos criando, embora funcione.  Feito isso, devemos iniciar a configuração de nosso pacote npm da seguinte forma:</span></p>
<table class="c37">
<tbody>
<tr class="c14">
<td class="c11" colspan="1" rowspan="1">
<p class="c18"><code><span class="c21">    </span><span class="c22">npm init</span></code></p>
</td>
</tr>
</tbody>
</table>
<p class="c16"><span class="c7 c3">        </span><span class="c3">Esse comando nos auxiliará na configuração básica de nosso pacote, criando o nosso arquivo </span><span class="c26">package.json</span><span class="c7 c3"> e o preenchendo com uma série de informações que iremos fornecer. Preencha a descrição, nome e autor como quiser, mas não preencha nada nos outros parâmetros. Ao fim da execução, o nosso arquivo deve estar semelhante a isso:</span></p>
<table class="c37">
<tbody>
<tr class="c14">
<td class="c11" colspan="1" rowspan="1">
<p class="c10"><code><span class="c0 c27">{</span></code></p>
<p class="c10"><code><span class="c0"> </span><span class="c2">"name"</span><span class="c0">: </span><span class="c28">"sum2"</span><span class="c0 c27">,</span></code></p>
<p class="c10"><code><span class="c0"> </span><span class="c2">"version"</span><span class="c0">: </span><span class="c28">"1.0.0"</span><span class="c0 c27">,</span></code></p>
<p class="c10"><code><span class="c0"> </span><span class="c2">"description"</span><span class="c0">: </span><span class="c28">"Somador de dois números"</span><span class="c0 c27">,</span></code></p>
<p class="c10"><code><span class="c0"> </span><span class="c2">"main"</span><span class="c0">: </span><span class="c28">"index.js"</span><span class="c0 c27">,</span></code></p>
<p class="c10"><code><span class="c0"> </span><span class="c2">"scripts"</span><span class="c0 c27">: {</span></code></p>
<p class="c10"><code><span class="c0">   </span><span class="c2">"test"</span><span class="c0">: </span><span class="c28">"echo </span><span class="c38">\"</span><span class="c28">Error: no test specified</span><span class="c38">\"</span><span class="c28 c27"> &amp;&amp; exit 1"</span></code></p>
<p class="c10"><code><span class="c0 c27"> },</span></code></p>
<p class="c10"><code><span class="c0"> </span><span class="c2">"author"</span><span class="c0">: </span><span class="c28">"Hierro Duarte"</span><span class="c0 c27">,</span></code></p>
<p class="c10"><code><span class="c0"> </span><span class="c2">"license"</span><span class="c0">: </span><span class="c28">"ISC"</span></code></p>
<p class="c10"><code><span class="c0">}</span></code></p>
</td>
</tr>
</tbody>
</table>
<p class="c16"><span class="c7 c3">        </span><span class="c3">A maior parte dos campos é auto descritivo, como </span><span class="c2 c25">"name"</span><span class="c3"> e </span><span class="c2 c25">"description"</span><span class="c3">, mas alguns podem gerar certa dúvida, como </span><span class="c2 c25">"scripts"</span><span class="c3">. De qualquer forma, eles serão explicados conforme necessário. Para aprender mais sobre o </span><span class="c26">package.json</span><span class="c3">, a </span><span class="c6 c3"><a class="c8" href="https://www.google.com/url?q=https://docs.npmjs.com/files/package.json&amp;sa=D&amp;ust=1584220289189000">documentação oficial</a></span><span class="c7 c3"> é um bom início.</span></p>
<p class="c5"><span class="c3">        Na primeira linha de nosso programa, declaramos que utilizaremos  o módulo </span><span class="c6 c3 c13"><a class="c8" href="https://www.google.com/url?q=https://www.npmjs.com/package/chalk&amp;sa=D&amp;ust=1584220289190000">Chalk</a></span><span class="c3">, que auxilia na impressão de strings na </span><span class="c24">CLI</span><span class="c7 c3">, fornecendo várias opções de estilização. Para utilizá-lo,  instalaremos essa dependência em nosso projeto com o seguinte comando:</span></p>
<table class="c37">
<tbody>
<tr class="c14">
<td class="c11" colspan="1" rowspan="1">
<p class="c18"><code><span class="c3 c46">   </span><span class="c21"> </span><span class="c30">npm install</span><span class="c21"> chalk@2.0.0  </span><span class="c22">--save</span></code></p>
</td>
</tr>
</tbody>
</table>
<p class="c5"><span class="c3">        Esse comando realiza a instalação do pacote </span><span class="c3 c13">Chalk</span><span class="c3"> na versão 2.0.0, buscando-o diretamente no </span><span class="c24">registro</span><span class="c3">, citado anteriormente. Para que essa dependência seja diretamente inserida em nosso </span><span class="c26">package.json</span><span class="c3">, utilizamos a flag </span><span class="c26">--save</span><span class="c3">. Sendo assim, quando compartilharmos nosso projeto, bastará que os usuários de nosso módulo utilizem o comando </span><span class="c25 c30">npm install</span><span class="c3">. Ao executá-lo, as dependências serão instaladas na pasta </span><span class="c41">node_modules</span><span class="c7 c3">. É nela em que todas nossas dependências são instaladas pelo npm.</span></p>
<p class="c5"><strong><span class="c12 c3 c4">E se as coisas estiverem desatualizadas?</span></strong></p>
<p class="c5"><span class="c3">        Uma das funções que a </span><span class="c24">CLI</span><span class="c3"> nos proporciona é a de checar quais dependências estão desatualizadas. Ao realizarmos a instalação do </span><span class="c3 c13">Chalk </span><span class="c7 c3">anteriormente, acabamos por optar por uma versão um pouco mais desatualizada. Podemos conferir isso executando:</span></p>
<table class="c37">
<tbody>
<tr class="c14">
<td class="c11" colspan="1" rowspan="1">
<p class="c18"><code><span class="c21">    </span><span class="c22">npm outdated</span></code></p>
</td>
</tr>
</tbody>
</table>
<p class="c5"><span class="c3">        A saída desse comando irá nos mostrar todos os nossos pacotes que estão desatualizados, mostrando a versão de cada um que está instalado, junto com sua versão recomendada e também a versão mais atualizada. Podemos então atualizar o pacote </span><span class="c3 c13">Chalk</span><span class="c7 c3"> com:</span></p>
<table class="c37">
<tbody>
<tr class="c14">
<td class="c11" colspan="1" rowspan="1">
<p class="c18"><code><span class="c21">    </span><span class="c30">npm update</span><span class="c21"> chalk </span><span class="c22">--save</span></code></p>
</td>
</tr>
</tbody>
</table>
<p class="c5"><span class="c3">        Lembrando que o pacote é atualizado para a última versão recomendada, ou seja, que potencialmente não irá causar problemas na execução de nossos programas, já que versões mais novas de pacotes podem não ser estáveis. Também utilizamos a flag </span><span class="c26">--save</span><span class="c3"> para que nossa dependência seja atualizada da forma correta dentro do </span><span class="c26">package.json</span><span class="c3">. Caso quiséssemos excluir esse pacote de vez de nosso projeto, poderíamos utilizar o comando</span><span class="c42"> </span><span class="c30 c25">npm delete </span><span class="c21 c25">&lt;nome_do_pacote&gt;</span>.</p>
<p class="c5"><strong><span class="c3 c4 c12">Dando asas ao nosso pacote</span></strong></p>
<p class="c5"><span class="c3">        Com nosso pacote já pronto, precisamos publicá-lo! Para isso, a primeira coisa que devemos fazer é criar uma conta no </span><span class="c6 c24"><a class="c8" href="https://www.google.com/url?q=https://www.npmjs.com/signup&amp;sa=D&amp;ust=1584220289198000">website</a></span><span class="c7 c3"> do npm (não esqueça de verificar seu e-mail para que possa publicar seus pacotes!). Com nossa conta criada, basta executarmos o seguinte comando:</span></p>
<table class="c37">
<tbody>
<tr class="c14">
<td class="c11" colspan="1" rowspan="1">
<p class="c18"><code><span class="c21">    </span><span class="c22">npm login</span></code></p>
</td>
</tr>
</tbody>
</table>
<p class="c5"><span class="c7 c3">        Ele irá nos pedir nossas credenciais e, preenchendo tudo corretamente, só precisaremos de mais um comando para que nosso projeto seja publicado. Execute:</span></p>
<table class="c37">
<tbody>
<tr class="c14">
<td class="c11" colspan="1" rowspan="1">
<p class="c18"><code><span class="c21">    </span><span class="c22">npm publish</span></code></p>
</td>
</tr>
</tbody>
</table>
<p class="c5"><span class="c3">        Após o comando finalizar sua execução, tudo estará pronto! O pacote já estará disponível dentro do </span><span class="c24">registro</span><span class="c7 c3"> npm, podendo ser consultado diretamente no site. Com isso, você já poderá criar seus próprios pacotes, manipulá-los e até mesmo publicá-los. Para mais tutoriais como esse, continue acessando nosso site, pois os PET Redações não irão parar!</span></p>
<p class="c1"><span class="c3">Para acessar o pacote desenvolvido neste artigo, </span><span class="c6 c3"><a class="c8" href="https://www.google.com/url?q=https://www.npmjs.com/package/sum2&amp;sa=D&amp;ust=1584220289202000">clique aqui</a></span><span class="c7 c3">.</span></p>
<p class="c16"> </p>
<img title="" src="https://i.ibb.co/NTfb1YG/pasted-image-0.png" alt="" />
<p class="c16 c9"> </p>
<p class="c5"><span class="c12 c3 c4">Aprendendo ainda mais!</span></p>
<p class="c5"><span class="c7 c3">        O npm ainda tem muitas outras funções que nem foram exploradas neste artigo, então por onde você pode continuar?</span></p>
<ul class="c35 lst-kix_e7k2oaxnkpky-0 start">
<li class="c5 c19"><span class="c6 c3"><a class="c8" href="https://www.google.com/url?q=https://flaviocopes.com/npm-packages-local-global/&amp;sa=D&amp;ust=1584220289203000">Pacotes locais e globais</a></span><span class="c7 c3">: além da instalação local de pacotes que fizemos, também é possível instalar programas globalmente através do npm. Flávio Copes, desenvolver web, detalha bem a diferença entre os dois métodos, suas vantagens e desvantagens, além de ensinar como fazê-los no texto linkado.</span></li>
<li class="c5 c19"><span class="c6 c3"><a class="c8" href="https://www.google.com/url?q=http://wbruno.com.br/nodejs/package-json-entendendo-os-scripts/&amp;sa=D&amp;ust=1584220289204000">npm Scripts</a></span><span class="c3">: lembra-se do campo </span><span class="c2 c25">"scripts" </span><span class="c3"> no arquivo </span><span class="c26">package.json</span><span class="c3">? Ele pode ser utilizado para criar automatizações para o seu pacote, como uma rotina de testes.</span></li>
<li class="c5 c19"><span class="c6 c3"><a class="c8" href="https://www.google.com/url?q=https://docs.npmjs.com/cli/config&amp;sa=D&amp;ust=1584220289205000">npm-config</a></span><span class="c3">: boa parte das funções da </span><span class="c24">CLI </span><span class="c7 c3">podem ser configuradas, permitindo que seus projetos já iniciem em um ambiente preparado.</span></li>
<li class="c5 c19"><span class="c6 c3"><a class="c8" href="https://www.google.com/url?q=https://nodejs.dev/the-npx-nodejs-package-runner&amp;sa=D&amp;ust=1584220289206000">npx</a></span><span class="c7 c3">: já pensou em executar pacotes npm sem instalá-los, podendo até mesmo especificar suas versões? É o que esse comando poderosíssimo permite!</span></li>
</ul>
<p class="c5"><span class="c3">        Além dessas dicas, não deixe de explorar o </span><span class="c24">registro</span><span class="c7 c3"> através do site, já que todos os dias são publicados e atualizados diversos novos projetos!</span></p>
<p class="c16 c9"> </p>
<p class="c5"><span class="c12 c3 c4"><strong>Referências</strong>:</span></p>
<ul class="c35 lst-kix_cb3o2mn3qa52-0 start">
<li class="c5 c15"><span class="c6 c3"><a class="c8" href="https://www.google.com/url?q=https://docs.npmjs.com/&amp;sa=D&amp;ust=1584220289207000">npm Documentation</a></span></li>
<li class="c5 c15"><span class="c6 c3"><a class="c8" href="https://www.google.com/url?q=https://nodejs.org/en/knowledge/getting-started/npm/what-is-npm/&amp;sa=D&amp;ust=1584220289208000">What is npm?</a></span></li>
<li class="c5 c15"><span class="c6 c3"><a class="c8" href="https://www.google.com/url?q=https://www.youtube.com/watch?v%3DjHDhaSSKmB0&amp;sa=D&amp;ust=1584220289208000">npm Crash Course</a></span></li>
<li class="c5 c15"><span class="c6 c3"><a class="c8" href="https://www.google.com/url?q=https://www.impressivewebs.com/npm-for-beginners-a-guide-for-front-end-developers/&amp;sa=D&amp;ust=1584220289209000">npm for Beginner’s: A Guide for Front-end Developers</a></span></li>
<li class="c5 c15"><span class="c6 c3"><a class="c8" href="https://www.google.com/url?q=https://www.sitepoint.com/beginners-guide-node-package-manager/&amp;sa=D&amp;ust=1584220289209000">A Beginner’s Guide to npm - the Node Package Manager</a></span></li>
<li class="c5 c15"><span class="c6 c3"><a class="c8" href="https://www.google.com/url?q=https://nodejs.org/en/about/&amp;sa=D&amp;ust=1584220289210000">About Node.js</a></span></li>
<li class="c5 c15"><span class="c6 c3"><a class="c8" href="https://www.google.com/url?q=https://codecondo.com/evolution-of-web-development/&amp;sa=D&amp;ust=1584220289210000">Evolution of Web Development</a></span></li>
<li class="c5 c15"><span class="c3 c6"><a class="c8" href="https://www.google.com/url?q=https://zellwk.com/blog/publish-to-npm/&amp;sa=D&amp;ust=1584220289211000">How to publish packages to npm</a></span></li>
<li class="c5 c15"><span class="c6 c3"><a class="c8" href="https://www.google.com/url?q=https://60devs.com/npm-install-specific-version.html&amp;sa=D&amp;ust=1584220289211000">npm: How to Install Specific Version of a Package</a></span></li>
<li class="c5 c15"><span class="c6 c3"><a class="c8" href="https://www.google.com/url?q=https://www.agiliq.com/blog/2019/01/using-npm-to-manage-frontend-libraries/&amp;sa=D&amp;ust=1584220289212000">Using npm to manage front-end librarie</a></span><span class="c6 c3"><a class="c8" href="https://www.google.com/url?q=https://www.agiliq.com/blog/2019/01/using-npm-to-manage-frontend-libraries/&amp;sa=D&amp;ust=1584220289212000">s</a></span></li>
</ul>
<!-- /wp:tadv/classic-paragraph -->]]></content:encoded>
													</item>
						<item>
				<title>MARS: IDE para programação em Assembly</title>
				<link>https://www.ufsm.br/pet/sistemas-de-informacao/2018/09/01/mars-ide-para-programacao-em-assembl</link>
				<pubDate>Sat, 01 Sep 2018 17:00:00 +0000</pubDate>
						<category><![CDATA[Destaques]]></category>
		<category><![CDATA[Redações]]></category>
		<category><![CDATA[ferramentas]]></category>

				<guid isPermaLink="false">https://www.ufsm.br/pet/sistemas-de-informacao/?p=2665</guid>
						<description><![CDATA[Nesta edição do PET Redação, vamos falar um pouquinho sobre programação de baixo nível. Isso quer dizer que a programação é ruim? Não, nada disso! Programação de baixo nível se trata de usarmos uma linguagem de programação que segue as características de estrutura do computador. Para isso, utilizaremos o software MARS (MIPS Assembler and Runtime [&hellip;]]]></description>
							<content:encoded><![CDATA[  <!-- wp:tadv/classic-paragraph -->
<section id="h.7a4292dd6ad776e6_8" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.7a4292dd6ad776e6_5" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Nesta edição do PET Redação, vamos falar um pouquinho sobre programação de baixo nível. Isso quer dizer que a programação é ruim? Não, nada disso! Programação de baixo nível se trata de usarmos uma linguagem de programação que segue as características de estrutura do computador. Para isso, utilizaremos o software MARS <em>(MIPS Assembler and Runtime Simulator) </em>e a arquitetura MIPS32.</p>
<p class="zfr3Q" dir="ltr">MARS é um ambiente de desenvolvimento integrado (IDE) destinado a estudos da arquitetura MIPS monociclo. Em conjunto com o software, nas disciplinas de Organização de Computadores e Arquitetura de Computadores, é utilizado o livro do Patterson, Organização e Arquitetura de Computadores.</p>
<p class="zfr3Q" dir="ltr">A ferramenta MARS é um programa desenvolvido em Java e a partir do release 4.0, contém 155 instruções básicas da arquitetura MIPS, aproximadamente 370 pseudo-instruções, 17 funções <em>syscalls </em>para o console e entrada e saída de dados, outras 22 funções <em>syscalls</em> para outros usos como o <em>MIDI output</em>, para as saídas de mídia, geração de números aleatórios, entre outras tantas funções que vamos ver ao longo do texto.</p>
<p class="zfr3Q" dir="ltr">Como podemos ver com essa breve introdução, a ferramenta é bem completa e proporciona ao usuário uma ótima noção do que acontece no processador. Então, basta fazer o download do software e começar a programar em Assembly.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.7a4292dd6ad776e6_13" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-II5mzb purZT-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.7a4292dd6ad776e6_9" class="hJDwNd-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2860 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/mars1.png" alt="" width="308" height="377" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-OwsYgb purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc yYI8W ">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.7a4292dd6ad776e6_19" class="hJDwNd-AhqUyc-OwsYgb jXK9ad D2fZ2 OjCsFc GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Assembly é o que, no mundo da computação, chamamos de linguagem de montagem. É, basicamente, uma linguagem intermediária entre as linguagens de programação que nós usuários usamos e o que o computador interpreta.</p>
</div>
</div>
</div>
</div>
<div class="oKdM2c">
<div id="h.7a4292dd6ad776e6_21" class="hJDwNd-AhqUyc-OwsYgb jXK9ad D2fZ2 wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">O compilador (GCC, por exemplo) interpreta o nosso código em linguagem de alto nível (C, C++) e gera um arquivo do programa traduzido para o assembly da arquitetura em que o programa está sendo rodado. Nós podemos gerar o arquivo do assembly com o GCC mandando a flag -S junto do código para compilar. Nesse caso, estaremos gerando um assembly da arquitetura x86, que é a arquitetura da maioria dos computadores de hoje em dia.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.7a4292dd6ad776e6_29" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.7a4292dd6ad776e6_26" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">A imagem acima mostra exatamente o que acontece com um programa quando ele é compilado. O compilador recebe o código fonte (arquivo.c) e gera um código assembly (arquivo.s) a partir dele. Depois, o Assembler vai interpretar o código assembly do código fonte e, com as bibliotecas, vai gerar um código objeto (arquivo.o). Esse código objeto é um aglomerado de 0s e 1s referentes ao nosso programa. Depois do código objeto ser montado, o Linker vai pegar todos os códigos objetos que o programa tiver, caso tenha mais do que um, e vai montar um código executável (arquivo.exe). É basicamente isso o que acontece com um programa ao ser compilado.</p>
<p class="zfr3Q" dir="ltr">O foco desse texto é aprender e entender como funciona um código Assembly. Por isso vamos nos basear no software MARS e na arquitetura MIPS32 para isso. O software está disponível para download no site dos desenvolvedores logo abaixo.</p>
<p class="zfr3Q" dir="ltr"><a class="XqQF9c" href="http://www.google.com/url?q=http%3A%2F%2Fwww.cs.missouristate.edu%2FMARS%2F.&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNEV6VyzXNNEhDiDZM4gfIjxSG-n-A" target="_blank" rel="noopener noreferrer">Link para download do MARS.</a></p>
<p class="zfr3Q" dir="ltr">Assim que você abrir o MARS, vai se dar de cara com uma interface bem comum, até. O software tem uma estrutura bem parecida com outras IDEs. Como a ferramenta é feita para fins educativos da arquitetura MIPS32, a IDE tem alguns elementos bem peculiares.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.7a4292dd6ad776e6_33" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.7a4292dd6ad776e6_30" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2861 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/mars2.png" alt="" width="1280" height="685" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.7a4292dd6ad776e6_37" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.7a4292dd6ad776e6_34" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Em nossa direita é possível ver uma lista de elementos estranhos, com os cabeçalhos “Name”, “Number” e “Valor”. Cada elemento dessa lista representa um registrador e, essa lista, está representando o banco de registradores do processador.</p>
<p class="zfr3Q" dir="ltr">Os campos “Name” e “Number” servirão para referenciarmos os nossos registradores no nosso código, já o campo “Value”, armazenará algum dado que quisermos colocar.</p>
<p class="zfr3Q" dir="ltr">Abaixo do espaço azul há uma caixa em branco com o botão “Clear” à sua esquerda. Esta caixa é o console da IDE. Nela, vamos receber respostas do programa, solicitar entrada de dados pelo console e afins.</p>
<p class="zfr3Q" dir="ltr">E por último, mas não menos importante, temos esse espaço em azul que é o editor de texto.</p>
<p class="zfr3Q" dir="ltr">Para criarmos um novo arquivo, basta clicarmos no primeiro ícone da tabela de acesso rápido, ou ir em ‘File&gt;New’. Após criarmos um arquivo em branco, o nosso editor vai ficar desse jeito.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.7a4292dd6ad776e6_41" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.7a4292dd6ad776e6_38" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2862 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/mars3.png" alt="" width="1280" height="679" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.7a4292dd6ad776e6_56" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-qWD73c purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.7a4292dd6ad776e6_65" class="hJDwNd-AhqUyc-qWD73c jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2863 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/mars4.png" alt="" width="777" height="593" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-qWD73c purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc yYI8W ">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.7a4292dd6ad776e6_62" class="hJDwNd-AhqUyc-qWD73c jXK9ad D2fZ2 OjCsFc GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Com um arquivo criado na IDE, podemos começar a escrever alguns códigos. Para ajudarmos-nos, é aconselhável usar o <em>Help</em>. Apertando <strong>F1</strong> temos acesso a ele.</p>
</div>
</div>
</div>
</div>
<div class="oKdM2c">
<div id="h.7a4292dd6ad776e6_64" class="hJDwNd-AhqUyc-qWD73c jXK9ad D2fZ2 wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">A janela de <em>Help</em> é essencial no aprendizado da ferramenta pois nele obtemos acesso a todas aquelas instruções as quais comentei no começo do texto. Obtemos acesso às <em>syscalls</em>, às diretivas, às pseudo-instruções e até às macros. Não veremos tudo isso nesse texto, mas veremos uma boa parte.</p>
<p class="zfr3Q" dir="ltr">Então, como começamos a escrever um código Assembly? Para começarmos com um código assembly, temos que entender como as instruções funcionam.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.7a4292dd6ad776e6_69" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.7a4292dd6ad776e6_66" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Em uma instrução temos dois elementos principais: O mnemônico e os operandos.</p>
<p class="zfr3Q" dir="ltr">O mnemônico é o “nome” da instrução, vamos dizer assim, e os operandos são os nomes ou números dos registradores nos quais estamos operando.</p>
<p class="zfr3Q" dir="ltr">Um exemplo de instrução é o ‘add’. Essa instrução realiza uma soma de dois registradores e armazena em um terceiro registrador. A instrução fica assim:</p>
<p class="zfr3Q" dir="ltr">add $t2, $t0, $t1</p>
<p class="zfr3Q" dir="ltr">Nesse caso, estamos fazendo uma soma do conteúdo do registrador $t0 com o conteúdo do registrador $t1 e armazenando o resultado em $t2. O registrador que recebe o resultado é o primeiro a ser referenciado na expressão, seguido pelos registradores que farão a operação.</p>
<p class="zfr3Q" dir="ltr">Já sabemos como funciona uma instrução de soma, vamos colocá-la na ferramenta e testar para ver o que vai dar.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.7a4292dd6ad776e6_70" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc yYI8W ">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.7a4292dd6ad776e6_76" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Antes da minha operação de soma, coloquei duas outras instruções para carregar valores nos registradores $t0 e $t1. Após carregar esses dois valores nos meus registradores, eu posso realizar a instrução add e ver o que vai acontecer.</p>
</div>
</div>
</div>
</div>
<div class="oKdM2c">
<div id="h.7a4292dd6ad776e6_80" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2864 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/mars5.png" alt="" width="1280" height="687" /></div>
</div>
</div>
</div>
</div>
<div class="oKdM2c">
<div id="h.7a4292dd6ad776e6_78" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Para compilar o código que estamos escrevendo, primeiro é necessário salvar o arquivo. Após salvar o arquivo, para compilar basta apertar <strong>F3</strong> ou ir em ‘Assemble&gt;Run’.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.7a4292dd6ad776e6_92" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.7a4292dd6ad776e6_89" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2865 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/mars6.png" alt="" width="1280" height="684" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.7a4292dd6ad776e6_96" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.7a4292dd6ad776e6_93" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Após compilar o programa, abre uma nova tela com esses elementos mostrados acima. Nesta tela podemos ver que temos outros dois segmentos que não conhecíamos, os segmentos de texto e de dados. O segmento de texto contém todas as nossas instruções do nosso código. Cada instrução terá um endereço, um código e para facilitar a compreensão na ferramenta, temos o campo ‘Source’, que contém exatamente o que está marcado naquela linha. Já o segmento de dados, representa a nossa memória. Mais adiante, nesse texto, veremos instruções que irão gravar na memória.</p>
<p class="zfr3Q" dir="ltr">Podemos ver na imagem acima que nosso segmento de texto contém três instruções a serem executadas. E são exatamente as instruções que colocamos no nosso editor de texto, lá na outra tela. É possível acessar aquela tela apenas clicando no botão ‘Edit’, bem à esquerda , abaixo da barra de acesso rápido.</p>
<p class="zfr3Q" dir="ltr">Mas e agora, como fazemos para ver o programa sendo executado? Bom, há duas formas de executar o programa. Podemos executá-lo instrução a instrução ou podemos executá-lo normal. Se apertarmos a tecla <strong>F5</strong> ou formos em ‘Run&gt;Go’, veremos que o programa irá executar até o fim, sem parar, mostrando os resultados no nosso banco de registradores à direita do segmento de dados.</p>
<p class="zfr3Q" dir="ltr">Os valores de $t0, $t1 e $t2 foram alterados para os valores que colocamos em $t0 e $t1, e o valor da soma em $t2.</p>
<p class="zfr3Q" dir="ltr">Se pressionarmos a tecla <strong>F7 </strong>ou acessar no menu a opção Run&gt;Step, executaremos uma instrução de cada vez. Executar desta maneira é muito bom para entender exatamente o que está acontecendo no processador. É bastante útil, também, para debugar código, pois veremos todas as instruções do programa sendo executadas uma por vez, conseguindo assim detectar o bug para corrigir exatamente onde nos é conveniente.</p>
<p class="zfr3Q" dir="ltr">Agora voltando ao nosso código, vemos que ele parece estar “solto” ali no editor de texto, não é? Pois bem, a partir de agora utilizaremos as diretivas para organizar o nosso código.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.7a4292dd6ad776e6_97" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc yYI8W ">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.7a4292dd6ad776e6_103" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">As diretivas servirão para dizer ao assembler onde ele deverá escrever aquele dado.</p>
<p class="zfr3Q" dir="ltr">As duas principais diretivas são ‘.text’ e ‘.data’, e servirão para dizer se estamos escrevendo código para o segmento de texto ou para o segmento de dados, respectivamente. Podemos consultar todas as diretivas do MIPS no <em>Help</em> pressionando <strong>F1</strong> e indo na aba ‘<em>Directives</em>’.</p>
<p class="zfr3Q" dir="ltr">Para entendermos melhor o que essas duas diretivas fazem, vamos olhar outro código. Vejamos este código de <strong>Hello World! </strong>em Assembly.</p>
</div>
</div>
</div>
</div>
<div class="oKdM2c">
<div id="h.7a4292dd6ad776e6_106" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2866 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/mars7.png" alt="" width="1280" height="684" /></div>
</div>
</div>
</div>
</div>
<div class="oKdM2c">
<div id="h.7a4292dd6ad776e6_105" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">O que há de novo neste código? Podemos ver as diretivas, como explicado anteriormente, mas também podemos ver novos elementos. Temos a instrução la, que vai nos servir para armazenar o endereço de algum elemento em um registrador específico. Nesse caso, estamos pegando o endereço do rótulo ‘printHelloWorld’. Um rótulo é como se fosse uma marcação daquele endereço específico. E com essa marcação, podemos acessar esse endereço por esse rótulo.</p>
<p class="zfr3Q" dir="ltr">Depois, temos a primeira <em>syscall</em>. Uma <em>syscall</em> é uma chamada do sistema, literalmente falando. Como ela funciona? Essa chamada do sistema tem dois registradores padrão de argumentos. O $a0 e o $v0. Para essa <em>syscall</em>, que é de imprimir uma string no console, enviamos o endereço da string que queremos imprimir para $a0 e o código da operação enviamos para $v0. Esse código da operação podemos consultar no <em>Help</em> apertando <strong>F1</strong> e indo na aba <em>Syscalls</em>. Após enviarmos os valores para os registradores de argumento da <em>syscall</em>, fazemos uma chamada com o comando syscall no nosso código.</p>
<p class="zfr3Q" dir="ltr">Também temos uma nova diretiva, o .asciiz, que é a diretiva responsável por representar os caracteres da string a seguir em ASCII com a terminação ‘\0’.</p>
<p class="zfr3Q" dir="ltr">Fora os novos elementos do código, é visível que ele está melhor estruturado, separando o que é do segmento de texto e o que é do segmento de dados.</p>
<p class="zfr3Q" dir="ltr">Após compilar o nosso código, na nossa tela de execução teremos algo diferente. O nosso segmento de dados não está mais vazio. Agora, contém nele a nossa string <strong>“Hello World!”</strong>, que enviamos com a diretiva .asciiz. Podemos executar o programa pressionando o <strong>F5</strong> ou através do <strong>F7</strong> e ver como o processador faz a execução de cada instrução.</p>
<p class="zfr3Q" dir="ltr">Se prestar atenção, veremos que no segmento de dados existem alguns valores bem grandes nos primeiros endereços. E se clicarmos no ASCII, abaixo do segmento de dados, veremos estes valores em ASCII. Nos primeiros endereços estão armazenados todos os caracteres em código ASCII da nossa string.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.7a4292dd6ad776e6_88" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.7a4292dd6ad776e6_85" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2867 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/mars8.png" alt="" width="1280" height="687" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.7a4292dd6ad776e6_111" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.7a4292dd6ad776e6_108" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Após o término da execução teremos no nosso console a string que mandamos imprimir e também poderemos ver dois valores em nossos registradores $a0 e $v0. Em $a0 observamos o valor 0x10010000, que corresponde ao endereço de começo da nossa string e, em $v0, o valor 0x00000004, que corresponde ao valor 4 que colocamos nele para executar a operação de imprimir string.</p>
<p class="zfr3Q" dir="ltr">Até agora vimos como o software MARS funciona, como as instruções da arquitetura MIPS funcionam e outras funções relacionadas a entrada e saída de dados. O que veremos agora serão as estruturas básicas de um programa representado em Assembly.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.7a4292dd6ad776e6_112" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc yYI8W ">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.7a4292dd6ad776e6_118" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr"><strong>Estruturas sequenciais:</strong></p>
<p class="zfr3Q" dir="ltr">As estruturas sequenciais são representadas da mesma forma que estruturamos essas em uma linguagem do paradigma procedural. Cada instrução é posicionada uma abaixo da outra. Vamos ver um exemplo de uma estrutura sequencial em Assembly.</p>
</div>
</div>
</div>
</div>
<div class="oKdM2c">
<div id="h.7a4292dd6ad776e6_122" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2868 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/mars9.jpg" alt="" width="1280" height="688" /></div>
</div>
</div>
</div>
</div>
<div class="oKdM2c">
<div id="h.7a4292dd6ad776e6_120" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">No código acima, vemos que no código escrito em C, estamos atribuindo valores para tais variáveis, operando estes valores e atribuindo para outras variáveis. Como é possível ver, no assembly é bem parecido. Nesse caso, os nossos registradores $t0, $t1, $t2, $t3, e $t4 representam as variáveis ‘a’, ‘b’, ‘c’, ‘d’, e ‘e’, respectivamente.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.7a4292dd6ad776e6_123" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc yYI8W ">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.7a4292dd6ad776e6_129" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr"><strong>Estruturas condicionais:</strong></p>
<p class="zfr3Q" dir="ltr">Nas estruturas condicionais temos os ‘<em>if’s’</em> , ‘<em>elses’ </em>e o <em>switch</em>. Essas estruturas serão construídas em assembly com instruções de desvios, chamadas de <em>branch.</em> Também devemos estruturar o código de forma a executar apenas os da condição, entretanto, como fazer isto? Bom, há duas formas de fazer isso, podemos estruturar o código para que verifique se a condição é satisfeita e salte para as instruções ou podemos estruturar o código para a condição que não é satisfeita e fique executando na sequência das instruções.</p>
<p class="zfr3Q" dir="ltr">A primeira forma de fazermos uma estrutura condicional é usando a instrução beq <em>(Branch if equal)</em>. A instrução beq verifica se os registradores possuem a mesma informação. Caso seja verdade, a instrução salta para o rótulo relacionado a ela.</p>
<p class="zfr3Q" dir="ltr">Podemos ver no exemplo abaixo:</p>
</div>
</div>
</div>
</div>
<div class="oKdM2c">
<div id="h.7a4292dd6ad776e6_133" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2869 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/mars10.jpg" alt="" width="1280" height="689" /></div>
</div>
</div>
</div>
</div>
<div class="oKdM2c">
<div id="h.7a4292dd6ad776e6_131" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">A outra forma de estruturarmos um <em>if-else </em>é com a instrução bne <em>(Branch if not equal)</em>. Essa instrução verifica se os registradores que estão operando são diferentes, caso sejam, a instrução realizará um salto para o rótulo relacionado.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.7a4292dd6ad776e6_134" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc yYI8W ">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.7a4292dd6ad776e6_140" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">A seguir, veja o exemplo na imagem:</p>
</div>
</div>
</div>
</div>
<div class="oKdM2c">
<div id="h.7a4292dd6ad776e6_144" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2870 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/mars11.png" alt="" width="1280" height="685" /></div>
</div>
</div>
</div>
</div>
<div class="oKdM2c">
<div id="h.7a4292dd6ad776e6_142" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Nos dois exemplos, vemos a instrução j, que é uma instrução de salto incondicional. Esta instrução realiza um salto para o rótulo relacionado a ela que contém o endereço de salto.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.7a4292dd6ad776e6_145" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc yYI8W ">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.7a4292dd6ad776e6_151" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">A estruturação de um <em>switch</em> na linguagem assembly usa várias instruções <em>branch</em> pois essa estrutura pode ter mais de dois resultados possíveis. Vejamos um exemplo de switch com 3 casos:</p>
</div>
</div>
</div>
</div>
<div class="oKdM2c">
<div id="h.7a4292dd6ad776e6_155" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="alignnone wp-image-2871 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/mars12.png" alt="" width="1280" height="684" /></div>
</div>
</div>
</div>
</div>
<div class="oKdM2c">
<div id="h.7a4292dd6ad776e6_153" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Como pode ser visto no exemplo, são várias instruções <em>branch</em> em sequência que verificam o valor do <em>case</em>. Neste caso, há o valor 2 no nosso <em>switch,</em> que fará com que realize o código do <em>case2</em>. Caso nenhum dos casos seja satisfeito, o programa realiza as instruções do <em>default</em>, colocado logo abaixo de todos os <strong>beq</strong>’s.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.7a4292dd6ad776e6_159" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.7a4292dd6ad776e6_156" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr"><strong>Estruturas de repetição:</strong></p>
<p class="zfr3Q" dir="ltr">As estruturas de repetição na linguagem Assembly utilizam-se de elementos que compõem as nossas outras estruturas. Como realizar uma operação <em><strong>n</strong></em> vezes? Em todos os casos haverá uma condição de parada. E para verificarmos uma condição, utilizamos as instruções <em>branch</em>.</p>
<p class="zfr3Q" dir="ltr">“A soma é realizada 10 vezes…”</p>
<p class="zfr3Q" dir="ltr">Nesse caso, o nosso laço irá iterar 10 vezes, certo? E como essa repetição funciona? Ela precisa executar aqueles passos contidos dentro da estrutura do laço e voltar para o começo do laço, correto?</p>
<p class="zfr3Q" dir="ltr">Bom, para estruturarmos essa “volta para o começo do laço”, usamos a instrução j e endereçamos um rótulo do começo do laço. Nos exemplos abaixo dá pra ver as três estruturas de repetição: <strong>do-while, while </strong>e <strong>for</strong>.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.7a4292dd6ad776e6_160" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-OwsYgb purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc yYI8W ">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.7a4292dd6ad776e6_190" class="hJDwNd-AhqUyc-OwsYgb jXK9ad D2fZ2 OjCsFc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-3341 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2022/11/mars13.jpg" alt="" width="881" height="472" /></div>
</div>
</div>
</div>
</div>
<div class="oKdM2c">
<div id="h.7a4292dd6ad776e6_165" class="hJDwNd-AhqUyc-OwsYgb jXK9ad D2fZ2 GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<div id="h.6yj1vza0cens" class="CobnVe aP9Z7e"> </div>
<div class="CjVfdc">
<div class="PPhIP rviiZ">
<div class="U26fgb mUbCce fKz7Od LRAOtb rm120e" role="presentation" aria-describedby="h.6yj1vza0cens" aria-label="Copiar link do título" data-tooltip="Copiar link do título" aria-hidden="true" data-tooltip-position="top" data-tooltip-vertical-offset="12" data-tooltip-horizontal-offset="0">
<div class="VTBa7b MbhUzd"> </div>
</div>
</div>
Do-While</div>
</div>
</div>
</div>
</div>
<div class="oKdM2c">
<div id="h.7a4292dd6ad776e6_197" class="hJDwNd-AhqUyc-OwsYgb jXK9ad D2fZ2">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-3339 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2022/11/mars14.jpg" alt="" width="890" height="471" /></div>
</div>
</div>
</div>
</div>
<div class="oKdM2c">
<div id="h.7a4292dd6ad776e6_172" class="hJDwNd-AhqUyc-OwsYgb jXK9ad D2fZ2 GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<div id="h.tkg95z4666x" class="CobnVe aP9Z7e"> </div>
<div class="CjVfdc">
<div class="PPhIP rviiZ">
<div class="U26fgb mUbCce fKz7Od LRAOtb rm120e" role="presentation" aria-describedby="h.tkg95z4666x" aria-label="Copiar link do título" data-tooltip="Copiar link do título" aria-hidden="true" data-tooltip-position="top" data-tooltip-vertical-offset="12" data-tooltip-horizontal-offset="0">
<div class="VTBa7b MbhUzd"> </div>
</div>
</div>
While</div>
</div>
</div>
</div>
</div>
<div class="oKdM2c">
<div id="h.7a4292dd6ad776e6_201" class="hJDwNd-AhqUyc-OwsYgb jXK9ad D2fZ2">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="wp-image-3340 size-full aligncenter" src="https://www.ufsm.br/app/uploads/sites/791/2022/11/mars15.jpg" alt="" width="887" height="436" /></div>
</div>
</div>
</div>
</div>
<div class="oKdM2c">
<div id="h.7a4292dd6ad776e6_179" class="hJDwNd-AhqUyc-OwsYgb jXK9ad D2fZ2 wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<div id="h.qtakf0r20d36" class="CobnVe aP9Z7e"> </div>
<div class="CjVfdc">
<div class="PPhIP rviiZ">
<div class="U26fgb mUbCce fKz7Od LRAOtb rm120e" role="presentation" aria-describedby="h.qtakf0r20d36" aria-label="Copiar link do título" data-tooltip="Copiar link do título" aria-hidden="true" data-tooltip-position="top" data-tooltip-vertical-offset="12" data-tooltip-horizontal-offset="0">
<div class="VTBa7b MbhUzd"> </div>
</div>
</div>
For</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-c5RTEf JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.7a4292dd6ad776e6_205" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.7a4292dd6ad776e6_202" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Apesar das três estruturas serem bem parecidas, elas diferem no posicionamento do incremento da variável controladora do laço. Estes exemplos são básicos, apenas para situar você, leitor, sobre como funcionam laços em uma linguagem de montagem.</p>
<p class="zfr3Q" dir="ltr">O MARS possui várias ferramentas que auxiliam no desenvolvimento de programas mais elaborados. Acessando o menu ‘<em>Tools’</em>, podemos ver essas ferramentas. Algumas delas são bem interessantes como a <em>MIPS X-Ray</em>, que mostra a propagação da instrução corrente no processador. O <em>Bitmap Display</em> é um simulador de uma interface gráfica, o interessante nessa ferramenta, implementando um programa para ser executado com essa interface, é ver como as GPUs funcionam e ter uma ideia de como funciona uma placa de vídeo. O <em>Keyboard and Display MMIO Simulator</em> simula as entradas do teclado em tempo real do programa. Estas são algumas das ferramentas que o software traz para o usuário estudar e aprender a programação de nível mais baixo.</p>
<p class="zfr3Q" dir="ltr">Além das ferramentas e de todas as funcionalidades que vimos no texto, o software também oferece as funções e registradores de ponto flutuante. Acessando a aba <em>‘Coproc 1’</em>, obtemos acesso a esses registradores. E as funções podem ser consultadas no menu <em>Help</em>, pressionando a tecla <strong>F1</strong>.</p>
<p class="zfr3Q" dir="ltr">As funções de ponto flutuante operam apenas nos registradores $<em>f</em>n. Apenas as instruções de conversão utilizam os dois tipos de registradores.</p>
<p class="zfr3Q" dir="ltr">Caso você tenha curiosidade de conhecer um pouco mais sobre a ferramenta, disponibilizo abaixo o link do meu GitHub, que contém os trabalhos que realizei na disciplina de Organização de Computadores. Nestes trabalhos eu utilizei tanto os simuladores de interface gráfica quanto os registradores de ponto flutuante.</p>
<ul class="n8H08c UVNKR">
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr"><a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fgithub.com%2Fmtsdalmolin%2FJogoDaForca&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNE270w5CFqQOrfO-JXHn9qFzFXmYw" target="_blank" rel="noopener noreferrer">Jogo da Forca em Assembly.</a></p>
</li>
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr"><a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fgithub.com%2Fmtsdalmolin%2Ft2-org&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNG9_CQ73SbQ-HyjLwQBUvEgrsjwcw" target="_blank" rel="noopener noreferrer">Operações em ponto flutuante.</a></p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.7a4292dd6ad776e6_210" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.7a4292dd6ad776e6_207" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<div id="h.tf68m9kxj2qg" class="GV3q8e aP9Z7e"> </div>
<div class="CjVfdc">
<div class="PPhIP rviiZ">
<div class="U26fgb mUbCce fKz7Od LRAOtb rm120e" role="presentation" aria-describedby="h.tf68m9kxj2qg" aria-label="Copiar link do título" data-tooltip="Copiar link do título" aria-hidden="true" data-tooltip-position="top" data-tooltip-vertical-offset="12" data-tooltip-horizontal-offset="0">
<div class="VTBa7b MbhUzd"> </div>
</div>
</div>
<strong>Referências:</strong></div>
<ol class="n8H08c BKnRcf">
<li class="TYR86d zfr3Q OmQG5e">
<div class="CjVfdc">
<div class="PPhIP rviiZ">
<div class="U26fgb mUbCce fKz7Od LRAOtb rm120e" role="presentation" aria-describedby="h.u311lesjy3gi" aria-label="Copiar link do título" data-tooltip="Copiar link do título" aria-hidden="true" data-tooltip-position="top" data-tooltip-vertical-offset="12" data-tooltip-horizontal-offset="0">
<div class="VTBa7b MbhUzd"><a class="XqQF9c" href="http://www.google.com/url?q=http%3A%2F%2Fcourses.missouristate.edu%2FKenVollmar%2Fmars%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNHDczBqd0o4NOUEKSY6GADQ4Cz7kg" target="_blank" rel="noopener noreferrer"><strong>Website dos desenvolvedores do software MARS;</strong></a></div>
</div>
</div>
</div>
</li>
<li class="TYR86d zfr3Q OmQG5e">
<div class="CjVfdc">
<div class="PPhIP rviiZ"><strong>“Computer and Organization Design” - David A. Patterson, John L. Hennessy.</strong></div>
</div>
</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- /wp:tadv/classic-paragraph -->]]></content:encoded>
													</item>
						<item>
				<title>Como instalar o Allegro 5</title>
				<link>https://www.ufsm.br/pet/sistemas-de-informacao/2018/08/28/como-instalar-o-allegro-5</link>
				<pubDate>Tue, 28 Aug 2018 17:09:00 +0000</pubDate>
						<category><![CDATA[Destaques]]></category>
		<category><![CDATA[Redações]]></category>
		<category><![CDATA[ferramentas]]></category>

				<guid isPermaLink="false">https://www.ufsm.br/pet/sistemas-de-informacao/?p=2667</guid>
						<description><![CDATA[Nesta edição do PET-REDAÇÃO será ensinado a instalar o Allegro nos sistemas operacionais Windows e Linux. O Allegro é uma biblioteca de multiplataforma destinada principalmente ao desenvolvimento de jogos, sendo possível desenvolver diretamente por linha de comando ou utilizando uma IDE. “Allegro is not a game engine: you are free to design and structure your [&hellip;]]]></description>
							<content:encoded><![CDATA[  <!-- wp:tadv/classic-paragraph -->
<section id="h.4f1fda8fb9b8b043_204" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_161" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Nesta edição do PET-REDAÇÃO será ensinado a instalar o Allegro nos sistemas operacionais Windows e Linux. O Allegro é uma biblioteca de multiplataforma destinada principalmente ao desenvolvimento de jogos, sendo possível desenvolver diretamente por linha de comando ou utilizando uma IDE.</p>
<blockquote>
<p class="zfr3Q" dir="ltr" style="text-align: center">“<em>Allegro is not a game engine: you are free to design and structure your program as you like</em>”.</p>
<p class="zfr3Q" dir="ltr" style="text-align: center">liballeg.org/</p>
</blockquote>
<div id="h.7yaf3wj8hldv" class="CobnVe aP9Z7e"> </div>
<div class="CjVfdc">
<div class="PPhIP rviiZ">
<div class="U26fgb mUbCce fKz7Od LRAOtb rm120e" role="presentation" aria-describedby="h.7yaf3wj8hldv" aria-label="Copiar link do título" data-tooltip="Copiar link do título" aria-hidden="true" data-tooltip-position="top" data-tooltip-vertical-offset="12" data-tooltip-horizontal-offset="0">
<div class="VTBa7b MbhUzd"> </div>
</div>
</div>
<strong>Instalando no Visual Studio 2017 (Windows)</strong></div>
<p class="zfr3Q" dir="ltr">A IDE que utilizaremos, o Visual Studio Community 2017, pode ser baixado através do site da Microsoft pelo seguinte link: “<a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fwww.visualstudio.com%2Fpt-br%2Fdownloads%2F%3Frr%3Dhttps%253A%252F%252Fwww.google.com.br%252F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNHcEqug2SC3RRkXb5-dO9SBgsn01g" target="_blank" rel="noopener noreferrer">https://www.visualstudio.com/pt-br/downloads/?rr=https%3A%2F%2Fwww.google.com.br%2F</a>”.</p>
<p class="zfr3Q" dir="ltr">O Visual Studio é uma IDE muito completa e segundo a Microsoft “A melhor ferramenta do setor para qualquer desenvolvedor”. Com ela, você pode programar em diversas linguagens.</p>
<p class="zfr3Q" dir="ltr">No ato da instalação você poderá decidir quais ferramentas acompanharão a IDE, quanto mais selecionar, mais pesado ficará. Em nosso caso, bastam ser selecionadas as opções relacionadas a <strong>C++</strong>.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.4f1fda8fb9b8b043_207" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-qWD73c purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_163" class="hJDwNd-AhqUyc-qWD73c jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Com o Visual Studio já Instalado, Crie um novo Projeto, seguindo a imagem ao lado ou utilizando o comando <strong>Ctrl+Shift+N</strong>:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-qWD73c purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_162" class="hJDwNd-AhqUyc-qWD73c jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2711 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/allegro1.png" alt="" width="1039" height="496" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.4f1fda8fb9b8b043_212" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-qWD73c purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_164" class="hJDwNd-AhqUyc-qWD73c jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2712 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/allegro2.png" alt="" width="942" height="611" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-qWD73c purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_318" class="hJDwNd-AhqUyc-qWD73c jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Em “<strong>Visual C++</strong>”, selecione “<strong>Empty Project</strong>”, como na imagem abaixo. Não se assuste, em breve será mostrado como programar em C ao invés de C++.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.4f1fda8fb9b8b043_215" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_165" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Preencha o nome do projeto como desejar. Em “<em><strong>Location”</strong></em>, insira o local onde será salvo o Projeto e em “<em><strong>Solution name</strong></em><em>”</em>, o nome da pasta em que o projeto ficará alocado. Após, clique em OK.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.4f1fda8fb9b8b043_218" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-OiUrBf purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_167" class="hJDwNd-AhqUyc-OiUrBf jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Com o projeto aberto, no canto superior direito, clique com o botão direito do mouse sobre o Projeto e clique em “<em><strong>Manage NuGet Packages…</strong></em><em>”</em> como na imagem a seguir:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-II5mzb purZT-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_166" class="hJDwNd-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2713 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/allegro3.png" alt="" width="602" height="602" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.4f1fda8fb9b8b043_223" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-OiUrBf purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_168" class="hJDwNd-AhqUyc-OiUrBf jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2714 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/allegro4.jpg" alt="" width="1280" height="613" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-II5mzb purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_169" class="hJDwNd-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Será aberto o NuGet Package Manager. Na aba “<strong>Browse</strong>”, digite “<strong>Allegro</strong>” e instale a primeira opção como na imagem ao lado:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.4f1fda8fb9b8b043_322" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_319" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Preste atenção na aba “<strong>Output</strong>” na parte inferior do Visual Studio. Aguarde a mensagem de conclusão da instalação como na imagem:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.4f1fda8fb9b8b043_228" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_170" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2715 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/allegro5.png" alt="" width="830" height="208" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.4f1fda8fb9b8b043_231" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-qWD73c purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_171" class="hJDwNd-AhqUyc-qWD73c jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Após, feche o NuGet Package Manager:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-qWD73c JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.4f1fda8fb9b8b043_234" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_172" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2716 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/allegro6.png" alt="" width="724" height="287" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.4f1fda8fb9b8b043_237" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-OiUrBf purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_173" class="hJDwNd-AhqUyc-OiUrBf jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Vá novamente no canto superior direito e clique com o botão direito do mouse sobre o Projeto, mas agora selecione “<strong>Properties</strong>”.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-II5mzb purZT-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_174" class="hJDwNd-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2717 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/allegro7.png" alt="" width="525" height="719" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.4f1fda8fb9b8b043_242" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-qWD73c purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_175" class="hJDwNd-AhqUyc-qWD73c jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Vá até “<strong>Allegro 5</strong>”, “<strong>Library Type</strong>” e selecione a opção ”<strong>Dynamic Debug - Dynamic runtime</strong>” e aperte o botão “<strong>Apply</strong>”, como na imagem a seguir:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-qWD73c purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_176" class="hJDwNd-AhqUyc-qWD73c jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2718 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/allegro8.png" alt="" width="836" height="543" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.4f1fda8fb9b8b043_247" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-qWD73c purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_177" class="hJDwNd-AhqUyc-qWD73c jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Agora vá para a aba “<strong>Add-ons</strong>”, e marque com “<strong>Yes</strong>” os Add-ons que você pretende utilizar em seu projeto. Não há problema em marcar todos caso você não saiba exatamente quais irá utilizar.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-qWD73c purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_178" class="hJDwNd-AhqUyc-qWD73c jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2719 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/allegro9.png" alt="" width="839" height="545" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.4f1fda8fb9b8b043_252" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-qWD73c purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_179" class="hJDwNd-AhqUyc-qWD73c jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Novamente, no seu Projeto clique com o botão direito desta vez na aba “<strong>Source Files</strong>”, selecione “<strong>Add</strong>” e “<strong>New Item</strong>”:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-qWD73c purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_180" class="hJDwNd-AhqUyc-qWD73c jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2720 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/allegro10.png" alt="" width="821" height="533" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.4f1fda8fb9b8b043_260" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-qWD73c purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_182" class="hJDwNd-AhqUyc-qWD73c jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2721 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/allegro11.png" alt="" width="941" height="611" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-qWD73c purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_181" class="hJDwNd-AhqUyc-qWD73c jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Seleciona-se um “<strong>C++ File</strong>” que por padrão tem formato <strong>.cpp</strong>, deste modo você teria que programar em C++, mas para utilizar C, basta trocar o tipo do arquivo no nome, de <strong>.cpp</strong> para <strong>.c</strong>, por exemplo, Main.cpp vira <strong>Main.c</strong>, como na imagem ao lado:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.4f1fda8fb9b8b043_265" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_184" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Você pode adicionar vários itens e utilizá-los como classes em seu projeto, como por Dica: Você pode adicionar vários itens ao seu projeto e utilizá-los como classes. Por exemplo, Rank.c (uma classe na qual você implementaria o sistema de ranqueamento do seu jogo).</p>
<p class="zfr3Q" dir="ltr">Agora já está tudo pronto, então é só programar!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.4f1fda8fb9b8b043_268" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_185" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2722 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/allegro12.png" alt="" width="895" height="283" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.4f1fda8fb9b8b043_271" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-II5mzb purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_186" class="hJDwNd-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Como exemplo, segue um código em Allegro que cria um <strong>display </strong>(janela do jogo) e insere a expressão “PET REDACAO”.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-OiUrBf purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_187" class="hJDwNd-AhqUyc-OiUrBf jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2723 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/allegro13.png" alt="" width="828" height="394" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.4f1fda8fb9b8b043_276" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-OwsYgb purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_188" class="hJDwNd-AhqUyc-OwsYgb jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Para executar, selecione “<strong>Local Windows Debugger</strong>” e pronto, você terá a sua primeira aplicação em Allegro.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-wNfPc purZT-AhqUyc-II5mzb pSzOP-AhqUyc-wNfPc JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_189" class="hJDwNd-AhqUyc-wNfPc pSzOP-AhqUyc-wNfPc jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2724 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/allegro14.png" alt="" width="804" height="634" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.4f1fda8fb9b8b043_328" class="yaqOZd lQAHbd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_325" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">*Obs: A aplicação durará apenas 5 segundos e se fechará sozinha. Caso queira deixar executando por mais tempo, basta aumentar a propriedade “<strong>al_rest(5.0)</strong>” localizada na linha 13. O valor equivale a cinco segundos e aumentar ou diminuir fica à sua escolha. Exemplo: “<strong>al_rest(10.0)</strong>”, fará a aplicação executar durante dez segundos.</p>
<p class="zfr3Q" dir="ltr">**Obs: O código está melhor explicado ao fim da redação!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.4f1fda8fb9b8b043_281" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_190" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<div class="CjVfdc">
<div class="PPhIP rviiZ">
<div class="U26fgb mUbCce fKz7Od LRAOtb rm120e" role="presentation" aria-describedby="h.jfv01doc4j0u" aria-label="Copiar link do título" data-tooltip="Copiar link do título" aria-hidden="true" data-tooltip-position="top" data-tooltip-vertical-offset="12" data-tooltip-horizontal-offset="0">
<div class="VTBa7b MbhUzd"> </div>
</div>
</div>
<strong>Instalando no Code::Blocks (Linux)</strong></div>
<p class="zfr3Q" dir="ltr">Para a instalação utilizaremos comandos <strong>apt-get</strong>, que operam não só no Ubuntu, Fedora e Debian como também em muitas outras distribuições do Linux.</p>
<p class="zfr3Q" dir="ltr">Primeiramente, vamos instalar o Code::Blocks. Para isso, abra o terminal e execute os seguintes comandos:</p>
<ul class="n8H08c UVNKR">
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr"><strong>sudo apt-get update </strong>(Atualiza o repositório)</p>
</li>
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr"><strong>sudo apt-get install codeblocks </strong>(Instala o Code::Blocks)</p>
</li>
</ul>
<p class="zfr3Q" dir="ltr">Agora, vamos a instalação do Allegro.</p>
<p class="zfr3Q" dir="ltr">Para começar, baixaremos alguns arquivos essenciais para a instalação do allegro com o seguinte comando:</p>
<ul class="n8H08c UVNKR">
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr"><strong>sudo apt-get install build-essential cmake xorg-dev libgl1-mesa-dev libglu-dev</strong></p>
</li>
</ul>
<p class="zfr3Q" dir="ltr">Agora instalaremos mais algumas dependências do Allegro com o comando a seguir:</p>
<ul class="n8H08c UVNKR">
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr"><strong>sudo apt-get install libpng-dev libcurl4-dev libfreetype6-dev libjpeg-dev libvorbis-dev libopenal-dev libphysfs-dev libgtk2.0-dev libasound-dev<br />libpulse-dev libflac-dev libdumb1-dev</strong></p>
</li>
</ul>
<p class="zfr3Q" dir="ltr">A partir de agora seu sistema já pode receber o Allegro. Para baixar a última versão dele, abra a página<a class="XqQF9c" href="http://www.google.com/url?q=http%3A%2F%2Fwww.allegro.cc%2Ffiles%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNHFUk9jztuO_U_PcaVANVDxGTrswQ" target="_blank" rel="noopener noreferrer"> </a><a class="XqQF9c" href="http://www.google.com/url?q=http%3A%2F%2Fwww.allegro.cc%2Ffiles%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNHFUk9jztuO_U_PcaVANVDxGTrswQ" target="_blank" rel="noopener noreferrer">http://www.allegro.cc/files/</a>. Baixe a versão do Allegro em formato <strong>.tar.gz</strong> como na imagem:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.4f1fda8fb9b8b043_284" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-qWD73c purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_191" class="hJDwNd-AhqUyc-qWD73c jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2725 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/allegro15.png" alt="" width="620" height="402" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-qWD73c JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.4f1fda8fb9b8b043_287" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_192" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Salve-o em um local em que seja fácil de localizá-lo posteriormente.</p>
<p class="zfr3Q" dir="ltr">Em seguida, abra o terminal e navegue através dos comandos “<strong>cd</strong>” até onde o arquivo foi baixado.</p>
<p class="zfr3Q" dir="ltr">Dica: <strong>cd</strong> (muda de diretório)</p>
<p class="zfr3Q" dir="ltr">Exemplo: <strong>$ cd /etc</strong></p>
<p class="zfr3Q" dir="ltr"><strong>cd -</strong> (volta para o diretório anterior)</p>
<p class="zfr3Q" dir="ltr">Exemplo: <strong>$ cd -</strong></p>
<p class="zfr3Q" dir="ltr"><strong>cd ..</strong> (volta um diretório acima)</p>
<p class="zfr3Q" dir="ltr">Exemplo: <strong>$ cd ..</strong></p>
<p class="zfr3Q" dir="ltr"><strong>cd ~</strong> (volta para seu diretório /home)</p>
<p class="zfr3Q" dir="ltr">Exemplo: <strong>$ cd ~</strong></p>
<p class="zfr3Q" dir="ltr">Agora iremos descompactar o “<strong>Source Code</strong>” do Allegro. Ainda no Terminal, insira o seguinte comando:</p>
<ul class="n8H08c UVNKR">
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr"><strong>tar -xvzf allegro-5.0.0.tar.gz</strong></p>
</li>
</ul>
<p class="zfr3Q" dir="ltr">Entre na pasta que você descompactou, "<strong>allegro-5.0.0</strong>", com o comando:</p>
<ul class="n8H08c UVNKR">
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr"><strong>cd allegro-5.0.0</strong></p>
</li>
</ul>
<p class="zfr3Q" dir="ltr">Crie uma pasta "<strong>build</strong>" com com o comando:</p>
<ul class="n8H08c UVNKR">
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr"><strong>mkdir build</strong></p>
</li>
</ul>
<p class="zfr3Q" dir="ltr">Entre na pasta "<strong>build</strong>" utilizando:</p>
<ul class="n8H08c UVNKR">
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr"><strong>cd build</strong></p>
</li>
</ul>
<p class="zfr3Q" dir="ltr">e digite o comando:</p>
<ul class="n8H08c UVNKR">
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr"><strong>cmake .. -DCMAKE_INSTALL_PREFIX=/usr</strong></p>
</li>
</ul>
<p class="zfr3Q" dir="ltr">Em seguida, compile a biblioteca executando o comando:</p>
<ul class="n8H08c UVNKR">
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr"><strong>make</strong></p>
</li>
</ul>
<p class="zfr3Q" dir="ltr">Para finalizar a instalação do Allegro, utilize o comando:</p>
<ul class="n8H08c UVNKR">
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr"><strong>sudo make install</strong></p>
</li>
</ul>
<p class="zfr3Q" dir="ltr">A partir deste comando você já pode criar aplicações em Allegro utilizando arquivos de texto e compilando pelo Terminal.</p>
<p class="zfr3Q" dir="ltr">Caso você prefira utilizar uma IDE para desenvolver, iremos configurar o Code::Blocks para funcionar juntamente com o Allegro.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.4f1fda8fb9b8b043_290" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-qWD73c purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_193" class="hJDwNd-AhqUyc-qWD73c jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2726 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/allegro16.png" alt="" width="354" height="230" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-qWD73c purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_194" class="hJDwNd-AhqUyc-qWD73c jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Abra o Code::Blocks e caso seja solicitado o compilador, opte por “<strong>GNU GCC Compiler</strong>”<strong>. </strong>Em seguida, vá até o menu “<strong>Settings</strong>” e selecione “<strong>Compiler...</strong>”.</p>
<p class="zfr3Q" dir="ltr">A seguir, clique na aba “<strong>Search directories</strong>”, como na imagem abaixo:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.4f1fda8fb9b8b043_295" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_195" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2727 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/allegro17.png" alt="" width="756" height="239" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.4f1fda8fb9b8b043_298" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_196" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Em seguida, na aba “<strong>Compiler</strong>”, adicione o seguinte comando após clicar em “<strong>Add</strong>”:</p>
<p class="zfr3Q" dir="ltr"><strong> /usr/include</strong></p>
<p class="zfr3Q" dir="ltr">Após acrescentar o comando, vá até a aba “<strong>Linker</strong>”, e acrescente este comando, também utilizando o botão “<strong>Add</strong>”:</p>
<p class="zfr3Q" dir="ltr"><strong> /usr/lib</strong></p>
<p class="zfr3Q" dir="ltr">Agora vá até a aba “<strong>Linker settings</strong>” e vá até "<strong>Other linker options</strong>”:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.4f1fda8fb9b8b043_301" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_197" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2728 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/allegro18.png" alt="" width="747" height="193" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.4f1fda8fb9b8b043_304" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_198" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Acrescente as seguintes linhas:</p>
<p class="zfr3Q" dir="ltr"><strong>`pkg-config allegro-5.0</strong></p>
<p class="zfr3Q" dir="ltr"><strong>allegro_primitives-5.0</strong></p>
<p class="zfr3Q" dir="ltr"><strong>allegro_audio-5.0</strong></p>
<p class="zfr3Q" dir="ltr"><strong>allegro_acodec-5.0</strong></p>
<p class="zfr3Q" dir="ltr"><strong>allegro_color-5.0</strong></p>
<p class="zfr3Q" dir="ltr"><strong>allegro_dialog-5.0</strong></p>
<p class="zfr3Q" dir="ltr"><strong>allegro_font-5.0</strong></p>
<p class="zfr3Q" dir="ltr"><strong>allegro_image-5.0</strong></p>
<p class="zfr3Q" dir="ltr"><strong>allegro_physfs-5.0</strong></p>
<p class="zfr3Q" dir="ltr"><strong>allegro_main-5.0</strong></p>
<p class="zfr3Q" dir="ltr"><strong>allegro_memfile-5.0</strong></p>
<p class="zfr3Q" dir="ltr"><strong>allegro_ttf-5.0</strong></p>
<p class="zfr3Q" dir="ltr"><strong>--libs `</strong></p>
<p class="zfr3Q" dir="ltr">Pronto, a instalação foi concluída e para testar, você pode utilizar o mesmo código de teste que foi utilizado na instalação com Windows (IDE Visual Studio).</p>
<p class="zfr3Q" dir="ltr">Agora, você possui tudo para começar a desenvolver utilizando a biblioteca Allegro.</p>
<p class="zfr3Q" dir="ltr">Agora, para melhor entendimento irei explicar o que faz cada parte do código utilizado como exemplo:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.4f1fda8fb9b8b043_307" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_199" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2729 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/allegro19.png" alt="" width="710" height="244" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.4f1fda8fb9b8b043_310" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.4f1fda8fb9b8b043_200" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr"><strong>#include &lt;allegro5/allegro.h&gt; </strong>(Inclui o Allegro ao Projeto)</p>
<p class="zfr3Q" dir="ltr"><strong>#include &lt;allegro5/allegro_font.h&gt; </strong>(Inclui as ferramentas de “escrita” do Allegro)</p>
<p class="zfr3Q" dir="ltr"><strong>al_init(); </strong>(Inicializa o Allegro)</p>
<p class="zfr3Q" dir="ltr"><strong>al_init_font_addon(); </strong>(Inicializa o addon de fontes)</p>
<p class="zfr3Q" dir="ltr"><strong>ALLEGRO_DISPLAY* display = al_create_display(800, 600); </strong>(Cria uma janela com resolução 800x600)</p>
<p class="zfr3Q" dir="ltr"><strong>al_clear_to_color(al_map_rgb(0, 0, 0)); </strong>(Define a cor de fundo ‘0,0,0’ = preto)</p>
<p class="zfr3Q" dir="ltr"><strong>al_draw_text(font, al_map_rgb(255, 255, 255), 400, 300, ALLEGRO_ALIGN_CENTER, “PET REDACAO”);</strong></p>
<p class="zfr3Q" dir="ltr">Dissecando a linha:</p>
<p class="zfr3Q" dir="ltr">al_draw_text --&gt; (comando para escrever na janela)</p>
<p class="zfr3Q" dir="ltr">(font, …) --&gt; (fonte setada para o texto a ser escrito)</p>
<p class="zfr3Q" dir="ltr">(al_map_rgb) --&gt; (converte o rgb para uma cor allegro)</p>
<p class="zfr3Q" dir="ltr">(255, 255, 255) --&gt; (equivalente a cor branca em RGB)</p>
<p class="zfr3Q" dir="ltr">, 400, 300 --&gt; (posição do texto)</p>
<p class="zfr3Q" dir="ltr">ALLEGRO_ALIGN_CENTER --&gt; (alinha o texto)</p>
<p class="zfr3Q" dir="ltr">“PET REDACAO”) --&gt; (texto a ser impresso na tela)</p>
<p class="zfr3Q" dir="ltr">al_rest(10.0); --<strong>&gt; </strong>(Faz o programa permanecer ativo por 10 segundos)</p>
<ul class="n8H08c UVNKR">
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr">Para mais tutoriais sobre Allegro, acesse: http://www.rafaeltoledo.net/tutoriais-allegro-5/</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- /wp:tadv/classic-paragraph -->]]></content:encoded>
													</item>
						<item>
				<title>Por que utilizar o Sublime Text?</title>
				<link>https://www.ufsm.br/pet/sistemas-de-informacao/2017/01/31/porque-utilizar-o-sublime-text</link>
				<pubDate>Tue, 31 Jan 2017 16:51:11 +0000</pubDate>
						<category><![CDATA[Destaques]]></category>
		<category><![CDATA[Redações]]></category>
		<category><![CDATA[ferramentas]]></category>

				<guid isPermaLink="false">http://coral.ufsm.br/pet-si/?p=775</guid>
						<description><![CDATA[Passadas as festas de virada de ano e as férias de alguns, desejamos a todos que 2017 seja um ano memorável, cheio de boas experiências, novos conhecimentos adquiridos e boas notas. E pra começar bem, já iniciamos nosso ano com novidade, estreando a recém criada atividade PET-Redação, que tem por objetivo a realização de publicações, aqui [&hellip;]]]></description>
							<content:encoded><![CDATA[  Passadas as festas de virada de ano e as férias de alguns, desejamos a todos que 2017 seja um ano memorável, cheio de boas experiências, novos conhecimentos adquiridos e boas notas. E pra começar bem, já iniciamos nosso ano com novidade, estreando a recém criada atividade <span style="color: #000000"><strong>PET-Redação</strong></span>, que tem por objetivo a realização de publicações, aqui em nosso site, sobre os mais diversificados assuntos, mas é claro, sempre relacionados a Tecnologia.
 <a href="https://www.ufsm.br/pet/sistemas-de-informacao/2017/01/31/porque-utilizar-o-sublime-text#more-775" class="more-link">(more...)</a>]]></content:encoded>
													</item>
					</channel>
        </rss>
        