Alexandre L. Rangel

Planilha para Análise de Dados

Planilha para o Gráfico de Linhas

Planilha para o Gráfico de Pizza

 Clique Aqui para baixar o arquivo do exercícios de SE()

Criando Protótipos de Aplicativos e Sistemas com o Pencil: Um Exemplo para Pizzarias

O Pencil é uma ferramenta gratuita e de código aberto que permite criar protótipos navegáveis de interfaces gráficas, tanto para aplicativos móveis quanto para sistemas web. Ele é leve, multiplataforma (Windows, Linux e macOS) e muito útil para validar ideias e planejar interfaces de forma visual e rápida.

Neste artigo, você vai aprender:

• Como adicionar novos modelos (stencils) no Pencil;

• Como criar um protótipo de aplicativo mobile de pizzaria com dois sabores;

• Como criar um protótipo de sistema web de controle da pizzaria, com cadastro de clientes, pizzas e pedidos.

1. Instalando o Pencil

Acesse o site oficial https://pencil.evolus.vn/ e baixe a versão para seu sistema operacional. Após a instalação, abra o programa para começar.

2. Adicionando modelos (stencils)

Os stencils são conjuntos de componentes visuais, como botões, campos, menus e ícones, organizados por tema (Android, iOS, Web, etc.).

Como adicionar novos stencils:

1. Vá em Tools > Manage Collections.

2. Clique em Get More Collections.

3. O Pencil abrirá uma página com coleções adicionais. Baixe a desejada.

4. No Pencil, clique em Install Collection e selecione o arquivo .epz baixado.

Para este tutorial, recomendamos instalar:

• Android GUI (para o app mobile)

• Web UI ou Desktop GUI (para o sistema web)

3. Protótipo mobile: Pedido de pizza

Objetivo:

Criar um app onde o cliente pode escolher entre dois sabores: calabresa e muçarela.

Telas necessárias:

a. Tela inicial

• Título: “Bem-vindo à Pizzaria da Vila”

• Botão: “Fazer Pedido”

b. Tela de seleção de pizza

• Texto: “Escolha o sabor”

• Duas opções (como botões ou imagens):

  • 🍕 Calabresa

  • 🧀 Muçarela

• Botão: “Confirmar Pedido”

c. Tela de confirmação

• Texto: “Seu pedido de pizza de [sabor] foi enviado!”

• Botão: “Voltar ao Início”

Como tornar navegável:

1. Selecione um botão, clique com o direito e vá em Link to → [tela de destino].

2. Faça isso para todos os botões de navegação.

💡 Use imagens ou ícones de pizza nos botões para deixar o protótipo mais visual.

4. Protótipo web: Sistema de controle da pizzaria

Objetivo:

Simular um sistema administrativo com as seguintes funcionalidades:

• Cadastro de pizzas

• Cadastro de clientes

• Visualização e recebimento de pedidos

Telas sugeridas:

a. Tela de login

• Campo de usuário

• Campo de senha

• Botão “Entrar”

b. Dashboard

• Menu lateral com opções:

  • “Pizzas”

  • “Clientes”

  • “Pedidos”

• Área principal com resumo de pedidos do dia

c. Tela de cadastro de pizzas

• Campos:

  • Nome da pizza

  • Ingredientes

  • Preço

• Botões: “Salvar” e “Cancelar”

d. Tela de cadastro de clientes

• Campos:

  • Nome

  • Telefone

  • Endereço

• Botões: “Salvar” e “Cancelar”

e. Tela de pedidos

• Lista com pedidos pendentes

• Botão “Marcar como entregue”

Dicas:

• Use os stencils da coleção Web UI.

• Organize a tela com grids ou painéis.

• Use links entre botões e páginas para simular navegação.

5. Exportando e compartilhando

Após terminar seu protótipo:

1. Vá em File > Export Document.

2. Escolha o formato:

   • PNG ou PDF: ideal para apresentações.

   • HTML: cria um protótipo navegável em navegador.

3. Para compartilhar, envie os arquivos por e-mail, Google Drive ou publique em um site.

Conclusão

O Pencil é uma excelente ferramenta para criar protótipos de apps e sistemas sem codificação, ideal para validar ideias com clientes, colegas ou investidores. Com poucos cliques, é possível simular desde um pedido de pizza até o controle completo de uma pizzaria.

Como Criar um Circuito Pisca-LED no Tinkercad com Blocos de Programação

O Tinkercad Circuits (https://www.tinkercad.com/) é uma plataforma online gratuita da Autodesk que permite criar e simular circuitos eletrônicos diretamente no navegador. É uma excelente ferramenta para quem está começando a aprender eletrônica e programação com Arduino. Neste tutorial, vamos mostrar como montar um circuito simples para fazer um LED piscar, usando blocos de programação visuais.

Etapa 1: Criando um novo projeto

1. Acesse o site: https://www.tinkercad.com/.

2. Faça login com sua conta (ou crie uma gratuitamente).

3. No menu superior, clique em “Circuits” (ou “Circuitos”).

4. Clique em “Create new Circuit” (Criar novo circuito).

Etapa 2: Adicionando os componentes

No ambiente de simulação, do lado direito da tela, temos a caixa de componentes. Vamos precisar de:

• 1 placa Arduino Uno R3

• 1 LED

• 1 resistor de 220 ohms

• 1 protoboard (opcional, para boa organização)

• Fios de conexão (wires)

Como adicionar:

1. Na barra lateral, procure por “Arduino Uno R3” e arraste para o espaço central.

2. Faça o mesmo para o LED e o resistor.

3. Opcionalmente, adicione uma protoboard para facilitar a organização dos componentes.

4. Conecte os componentes da seguinte forma:

   • O terminal positivo (ânodo) do LED (perna maior) vai ao pino 13 do Arduino.

   • O terminal negativo (cátodo) do LED vai a uma ponta do resistor.

   • A outra ponta do resistor vai ao GND do Arduino.

💡 Dica: use fios coloridos diferentes para facilitar a identificação (por exemplo, vermelho para alimentação e preto para o GND).

 Figura 1 - Projeto Pisca-Led

Etapa 3: Programando com blocos

O Tinkercad permite programar o Arduino usando blocos visuais, parecidos com os do Scratch. Isso facilita muito o aprendizado.

Passos para programar:

1. Clique na aba “Code” no canto superior direito.

2. Altere a opção de texto para “Blocos + Texto” ou apenas “Blocos”.

3. Apague os blocos padrões e monte a seguinte lógica:

• “ao iniciar”

  • deixe vazio

• “repetir para sempre”

• “definir pino 13 para ALTO”

• “esperar 1 segundo”

• “definir pino 13 para BAIXO”

• “esperar 1 segundo”

 Figura 2 - Código de Blocos

Esse conjunto de blocos fará com que o LED ligado ao pino 13 acenda por 1 segundo e apague por 1 segundo, repetidamente.

Etapa 4: Iniciando a simulação

Agora é hora de testar se tudo está funcionando:

1. Clique no botão “Start Simulation” (Iniciar simulação) no topo da tela.

2. Você verá o LED piscando a cada 1 segundo.

Se o LED não piscar:

• Verifique se os fios estão conectados corretamente.

• Certifique-se de que o resistor está em série com o LED.

• Confirme se o pino usado na programação é o mesmo do circuito (neste caso, pino 13).

Etapa 5: Compartilhando seu projeto

Após testar seu circuito, você pode compartilhar com outras pessoas:

1. Clique em “Tinkercad” no canto superior esquerdo e volte à tela de projetos.

2. Clique sobre o projeto para abri-lo.

3. No lado direito da tela clique em “Alterar visibilidade para compartilhar”, como pode ser observado na figura 4.

4. Na tela "Propriedades do Projeto"  modifique a lista suspensa "Privacidade" para a opção "Compartilhar Link", como pode ser visto na figura 5. 

5. Clique no botão "Salvar alterações" para efetivar as mudanças.

6. Copie o link público gerado e compartilhe com seus amigos, alunos ou nas redes sociais.

Exemplo de link público:

https://www.tinkercad.com/things/cnSp9nbMARq-7m2-amarelo?sharecode=5pMd9KE9FYXADy8n0WG7Is5NCpgXx1v1jDKfT4Idw_Q

 Figura 4 - Modificando a visibilidade e publicando o projeto.

Usar QR codes pode facilitar o acesso a sites, links de redes sociais ou a qualquer URL que você queira compartilhar na sua apresentação. 

Para gerar o QR Code usando o https://qr.io/:

1. Acesse o site https://qr.io/.

2. Escolha a opção Criar QR Code.

3. No campo URL, insira o link desejado, por exemplo: https://www.tinkercad.com/things/cnSp9nbMARq-7m2-amarelo?sharecode=5pMd9KE9FYXADy8n0WG7Is5NCpgXx1v1jDKfT4Idw_Q. Neste caso, usei o link gerado pelo TinkerCad.

4. Clique em Gerar QR Code e aguarde o código ser criado.

5. Após gerado, você pode baixar a imagem do QR code para inseri-la no seu slide do PowerPoint, como mostrado na seção anterior (Figura 6).

 Figura 6 - Gerando um QRCode do link do Projeto do TinkerCad

Conclusão

Criar um circuito com LED piscando no Tinkercad é uma ótima maneira de aprender os conceitos básicos de eletrônica e programação com Arduino, sem precisar de componentes físicos. A interface com blocos torna tudo mais acessível, especialmente para iniciantes.

No uso diário do PowerPoint, muitas vezes queremos personalizar um template para atender melhor às nossas necessidades. Além disso, códigos QR e referências podem ser ferramentas úteis para adicionar ainda mais informação às apresentações. Neste artigo, explico o passo a passo para modificar templates do PowerPoint e também como criar QR codes e referências de maneira prática.

O template do Encontro Cultural você baixa clicando aqui.

1. Modificando Templates do PowerPoint

Se você já selecionou um template no PowerPoint e quer customizá-lo, siga estes passos:

Passo 1: Adicionando Imagens

1. Escolha o Slide em que deseja inserir a imagem.

2. No menu superior, vá até Inserir -> Imagens e selecione de onde deseja obter a imagem (se é do seu computador, da web, etc.).

3. Após a imagem ser adicionada, você pode redimensioná-la e movê-la para o lugar desejado.

4. Para um toque mais profissional, você também pode usar as Opções de Formato para ajustar brilho, contraste e bordas.

Passo 2: Modificando Textos

1. Clique na caixa de texto do slide que você deseja modificar.

2. Digite o novo texto ou modifique o texto já existente.

3. Use as opções de formatação (fonte, cor, tamanho) na aba Início para personalizar o texto de acordo com o estilo da apresentação.

2. Como Gerar um QR Code

Usar QR codes pode facilitar o acesso a sites, links de redes sociais ou a qualquer URL que você queira compartilhar na sua apresentação. Um exemplo prático é utilizar o QR Code para redirecionar o público ao seu blog, como o [https://alexandrelrangel.blogspot.com/](https://alexandrelrangel.blogspot.com/).

Para gerar o QR Code usando o https://qr.io/:

1. Acesse o site https://qr.io/.

2. Escolha a opção Criar QR Code.

3. No campo URL, insira o link desejado, por exemplo: https://alexandrelrangel.blogspot.com/. Use a URL do seu site que você hospedou no GitHub Pages. Se ainda não fez, clique aqui para entender como fazer.

4. Clique em Gerar QR Code e aguarde o código ser criado.

5. Após gerado, você pode baixar a imagem do QR code para inseri-la no seu slide do PowerPoint, como mostrado na seção anterior.

Você pode adicionar o QRCode ao template do powerpoint do Encontro Cultural.

3. Gerando Referências de forma Fácil e Rápida

Para quem deseja adicionar referências acadêmicas ou bibliográficas na apresentação, o site https://more.ufsc.br/ facilita muito.

Veja como usar o MORE (Módulo de Referências):

1. Acesse o site do MORE (https://more.ufsc.br/).

2. Escolha o tipo de referência desejada, clicando em Criar Referências e depois escolhendo a mais adequada. Veja as mais usadas:

    - Livros: Monografia no todo -> Livros

    - Sites: Documentos Exclusivos em Meio Eletrônico -> Homepages

3. Preencha os campos com as informações requeridas (no caso de um site, insira o link do blog, por exemplo: `https://alexandrelrangel.blogspot.com/`).

5. Copie a referência gerada e cole no PowerPoint, ou em qualquer documento onde precise referenciar o conteúdo.

Esses passos simples podem ajudar a criar uma apresentação visualmente mais atraente e informativa. Além disso, as ferramentas de QR Code e referências são complementos valiosos para dar ainda mais credibilidade e interatividade aos seus slides.

4. Gerando Imagens com o Leonardo.ai

Para criar imagens incríveis usando o Leonardo AI, o primeiro passo é fazer o cadastro na plataforma. Acesse o site oficial (www.leonardo.ai), registre-se com um e-mail válido e, ao entrar na interface, você será guiado até a área de criação. A interface é bastante intuitiva, com diversas opções de customização que permitem ajustar todos os detalhes da imagem antes de iniciar o processo de geração. Com um cadastro gratuito, é possível experimentar algumas criações para conhecer o potencial da ferramenta. Contudo, para projetos maiores ou mais específicos, é interessante considerar as opções pagas.

Depois de registrado, comece criando uma nova imagem selecionando o botão de “criação” ou "new project", dependendo da versão. Uma das principais vantagens do Leonardo AI é a sua capacidade de entender descrições detalhadas em texto e transformá-las em imagens de alta qualidade. No campo de descrição, é possível inserir detalhes específicos sobre o que você deseja criar: escolha o estilo, a atmosfera, cores, objetos e até o ângulo da imagem. Seja o mais claro e específico possível na descrição, pois quanto mais informações fornecer, mais próximo o resultado será da sua visão.

Além da descrição em texto, o Leonardo AI oferece algumas opções adicionais para refinar ainda mais o resultado. Entre elas, há controles de profundidade de campo, saturação de cores e até ajustes no estilo da imagem. Explore essas configurações para personalizar ao máximo e obter um resultado único. Outro recurso interessante é a possibilidade de adicionar filtros ou efeitos que dão um toque artístico às imagens, permitindo que você ajuste desde os aspectos visuais até as dimensões, criando uma imagem realmente sob medida para o que deseja.

Tela do Leonardo.ai

Por fim, quando estiver satisfeito com a imagem gerada, é possível fazer o download em várias resoluções, o que facilita o uso para redes sociais, blogs, apresentações e outros projetos. Com o Leonardo AI, você não precisa de conhecimentos avançados em design para criar ilustrações impressionantes. Teste a plataforma com diferentes estilos e aproveite o poder da inteligência artificial para dar vida às suas ideias com apenas alguns cliques!

 Acesse o artigo original no DeB's Dad!

https://debsdad.blogspot.com/2024/10/github-pages.html

Veja o artigo original no DeB's Dad!

https://debsdad.blogspot.com/2024/10/como-usar-o-figma-conceitos-de-design-e.html

Veja o artigo original no DeB's Dad!

https://debsdad.blogspot.com/2024/10/o-que-e-responsividade-em-paginas-web-e.html

Veja o artigo original no DeB's Dad

https://debsdad.blogspot.com/2024/10/introducao-ao-formato-svg-e-suas.html

Veja o artigo original em DeB's Dad!

https://debsdad.blogspot.com/2024/10/explorando-o-futuro-da-internet.html