Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Tecnologia em Análise e Desenvolvimento de Sistemas

Setor de Educação Profissional e Tecnológica - SEPT

Universidade Federal do Paraná - UFPR

Prof. Alexander Robert Kutzke

DS122 - Desenvolvimento de Aplicações Web 1

Material da Disciplina DS122 - Desenvolvimento de Aplicações Web 1

Instruções gerais

Tarefas

  1. Exercício de preparação
  2. HTML:
  3. CSS:
  4. Javascript:
  5. DOM:
  6. Jquery:
  7. PHP:

Pré-prompt para uso durante as aulas

Sempre que iniciar uma nova conversa sobre a disciplina, cole o Prompt de Configuração (fornecido pelo professor) na primeira mensagem. Isso ajustará a IA para ser direta e técnica, removendo mensagens motivacionais e impedindo que ela entregue respostas prontas.

“Atue como um tutor socrático especializado em Ciência da Computação. Seu objetivo é auxiliar no meu desenvolvimento técnico e analítico, respeitando as seguintes diretrizes de interação:

  1. Objetividade Técnica: Comunique-se de forma estritamente direta e profissional. Abstenha-se de mensagens de saudação, frases motivacionais, cortesias ou preâmbulos. Vá diretamente ao conteúdo técnico solicitado.

  2. Restrição de Código-Solução: Está terminantemente proibido fornecer implementações completas ou blocos de código que resolvam exercícios, problemas ou projetos que eu apresentar.

  3. Exemplos Conceituais e Abstratos: Caso seja necessário ilustrar um conceito ou sintaxe, forneça exemplos genéricos e minimalistas (máximo de 5 linhas). Estes exemplos não devem ter relação direta com o contexto do problema que estou tentando resolver.

  4. Mediação Socrática: Diante de dúvidas ou erros no meu código, não ofereça a correção. Em vez disso, aponte a inconsistência lógica ou o conceito de documentação relevante e formule perguntas que me conduzam à autocrítica e à resolução autônoma.

  5. Foco em Arquitetura e Algoritmos: Priorize a discussão sobre estruturas de dados, complexidade algorítmica e lógica de programação antes de abordar particularidades de sintaxe.

  6. Verificação de Retenção (Opcional): Apenas se eu incluir a hashtag #validar em minha pergunta, você deve, após a explicação, solicitar que eu descreva a lógica subjacente com minhas próprias palavras para validar minha compreensão.“

🧠 O Comando #validar

O item 6 do nosso protocolo é uma ferramenta de Metacognição. Você tem o controle sobre quando quer ser testado pela IA.

Quando utilizar o #validar?

  • Ao aprender um conceito novo e abstrato (ex: Ponteiros, Recursão, Herança).

  • Quando a explicação da IA parecer clara, mas você não tem certeza se saberia aplicar sozinho.

  • Para garantir que você não está apenas “copiando a lógica” da IA sem entendê-la.

Exemplo de uso no chat:

“Não entendi como funciona o desempilhamento em uma função recursiva. Pode me explicar? #validar”

O que acontece depois:

A IA explicará o conceito de forma breve e, em seguida, pedirá que você explique a lógica de volta para ela. Ela só confirmará se você acertou após ler a sua explicação.

🛠️ Melhores Práticas para Alunos de Engenharia/TI

O que FAZER 🟢

  • Enviar o seu código com erro e perguntar: “Em qual conceito de lógica eu falhei aqui?”
  • Pedir exemplos genéricos de sintaxe (ex: “Como declarar um vetor em C++?”).
  • Usar a IA para interpretar mensagens de erro do compilador.

O que EVITAR 🔴

  • Colar o enunciado do exercício e pedir: “Resolva para mim”.
  • Pedir que a IA escreva a função específica do seu trabalho acadêmico.
  • Aceitar uma solução da IA sem entender cada linha do que foi sugerido.

⚠️ Lembre-se:

A IA no ensino superior deve ser uma ferramenta de apoio ao aprendizado. Se você apenas pedir respostas completas, estará diminuindo sua capacidade de resolver problemas reais e complexos.

Sobre Mob Programming para exercícios

Instruções: Mob Programming

O que é? O Mob Programming é uma técnica de desenvolvimento onde o grupo trabalha no mesmo código, ao mesmo tempo, utilizando apenas um computador. O objetivo é unificar o conhecimento e evitar que apenas um aluno resolva o problema.

Como funciona (Os Papéis)? A equipe atua com dois papéis estritos, que são alternados durante a aula:

  1. Piloto: É a única pessoa com as mãos no teclado e mouse. O Piloto não codifica por conta própria; sua função é digitar estritamente o que o grupo instruir.
  2. Navegadores: São os demais membros do grupo. Eles discutem o problema, pesquisam a documentação, formulam a lógica e ditam para o Piloto exatamente o que deve ser escrito.

Regras de Mob Programming nessa disciplina:

  • Formação: Duplas ou trios.
  • Equipamento: Apenas um computador deve ser utilizado por grupo para a escrita do código. Os demais podem usar dispositivos apenas para leitura de documentação.
  • Exercício: O professor disponibilizará o exercício na UFPR Virtual ou material da disciplina.
  • Rotação (Timer): Um cronômetro de 7 minutos será projetado na tela. Este é o tempo ideal para manter o foco e garantir que todos programem sem fadiga.
  • A Troca: Quando o alarme tocar, o Piloto solta o teclado imediatamente e torna-se um Navegador. O próximo aluno assume como Piloto. A troca deve ser rápida para não pausar o fluxo de raciocínio.

Sempre utilize o Pré-prompt sugerido quando for fazer uso de IA generativa nas aulas da disciplina.

Aula 01 - Apresentação

Plano de ensino e avaliação

Consultar moodle da disciplina (https://ufprvirtual.ufpr.br).

O que aprenderemos?

  • Funcionamento do paradigma cliente-servidor;
  • Web e internet;
  • Protocolo HTTP (HyperText Transfer Protocol) que rege as interações entre serviços na Web;
  • Linguagens:
    • HTML (HyperText Markup Language);
    • CSS (Cascading Style Sheets);
    • JS (JavaScript):
      • Biblioteca Jquery;
    • PHP.

Q. Essa disciplina é difícil?

Não. O conteúdo apresentado durante a disciplina é, em geral, simples. Além disso, é um tema interessante e extremamente requisitado nos dias atuais.

Entretanto, pela listagem acima, percebe-se que o conteúdo é vasto. São, pelo menos, 4 novas linguagens a serem aprendidas pelos alunos e pelas alunas.

Outros complicador merecem atenção dos alunos e das alunas: A disciplina está no segundo semestre do curso: nessa etapa, o contato dos alunos e das alunas com disciplinas de programação ainda está no início. Em oposição a isso, esta disciplina exige, a partir do segundo mês, uma prática mais intensiva de programação.

Enfim, embora a disciplina aparente ter conteúdos simples, o contexto em que ela se insere a torna um tanto trabalhosa. Nesse sentido, indico, desde o primeiro dia, que alunos e alunas se dediquem a essa disciplina, busquem conteúdo além das aulas, procurem o professor para tirar dúvidas e, acima de tudo, façam exercícios e pratiquem.

Definitivamente essa é uma das disciplinas com maior número de materiais de qualidade disponíveis na internet. Aproveitem e tirem o melhor deles! ;)

Sobre o ambiente de desenvolvimento

Nessa disciplina, não utilizaremos nenhum software específico para a produção de arquivos HTML, CSS, JS e PHP. Utilizaremos editores de texto de propósito geral. Cada aluno pode utilizar aquele que preferir. Sugerem-se os seguintes:

Além disso, no decorrer da disciplina, alguns conteúdos estarão disponíveis em repositórios GIT, como o próprio material que está lendo agora. Esses repositórios estão armazenados no serviço Gitlab.com ( https://gitlab.com/ ). Para maiores informações leia aqui.

Portanto, embora opcional, é indicado que cada aluno e cada aluna instale os softwares necessários para trabalhar com Git:

Outros serviços

Os computadores do laboratório, tanto no Windows quanto no Linux, possuem as ferramentas acima instaladas.

Embora o PHP esteja apto a ser executado em qualquer plataforma, a experiência de instalá-lo em um ambiente Unix produz conhecimentos interessantes para o aluno. Assim, sugere-se que o aluno ou a aluna que tenha interesse, instale uma máquina virtual Linux em seu próprio computador ou utilize o Ubuntu instalado nos computadores durante as aulas (principalmente na segunda metade da disciplina).

No decorrer das aula, mais comentários serão feitos sobre essas instalações.

Existem, ainda, algumas outras opções limitadas disponíveis online, como:

  • https://codeanywhere.com

Aula - Ambientaçao com o Git

Ideia Git

O objetivo dessa aula é termos uma primeira experiência com o uso do git e do Gitlab. Para isso, faça o seguinte (seguindo os passos do professor em aula):

  1. Realize o seu primeiro acesso no gitlab.com;
  2. Crie o seu grupo para as tarefas da disciplina (instruções);
  3. Resolva a primeira tarefa.

Aula - Protocolo HTTP

Bibliografia recomendada para o tema:

  • Cap 7.3 do livro do Tanembaum (ver plano de ensino no moodle);
  • MDN - HTTP.

Modelo Cliente-Servidor

Diferentemente do modelo de programação para desktop (em geral, com um único ator), o modelo de programação cliente-servidor conta com dois atores:

  • Cliente: Realiza requisições, uma a uma, e aguarda respostas;
  • Servidor: Processa requisições e as responde, uma a uma.

Protocolo HTTP

Na web, o protocolo que gerencia a troca de informações (requisições e respostas) entre clientes e servidores é o HTTP (HyperText Transfer Protocol).

Segundo a Wikipedia1:

O Hypertext Transfer Protocol (HTTP), em português Protocolo de Transferência de Hipertexto, é um protocolo de comunicação (na camada de aplicação segundo o Modelo OSI) utilizado para sistemas de informação de hipermídia, distribuídos e colaborativos. Ele é a base para a comunicação de dados da World Wide Web.

Hipertexto é o texto estruturado que utiliza ligações lógicas (hiperlinks) entre nós contendo texto. O HTTP é o protocolo para a troca ou transferência de hipertexto.

Coordenado pela World Wide Web Consortium e a Internet Engineering Task Force, culminou na publicação de uma série de Requests for Comments; mais notavelmente o RFC 2616, de junho de 1999, que definiu o HTTP/1.1. Em Junho de 2014 foram publicados 6 RFC’s para maior clareza do protocolo HTTP/1.1. Em Março de 2015, foi divulgado o lançamento do HTTP/2.

RFC’s (Requests for comments) são a forma oficial de como os protocolos, regras, especificações e padrões de funcionamento da web são divulgados.

O criador do protocolo HTTP foi Tim Berners-Lee.

Funcionamento do Protocolo HTTP

Modelo Cliente-Servidor

Uniform Resource Locator (URL)

URL’s são a forma utilizada para se localizar serviços na Web. Trata-se de uma sequência de caracteres, com estrutura definida, capaz de identificar onde e como uma dado serviço será acessado.

Para mais detalhes e exemplo, consulte: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web

Interessado? Pesquise sobre a diferença entre URL, URN e URI (pode começar por aqui)

Exemplo de mensagem HTTP

Uma requisição:

GET /index.html HTTP/1.1
Host: www.example.com

Uma resposta:

HTTP/1.1 200 OK
Date: Mon, 23 May 2005 22:38:34 GMT
Content-Type: text/html; charset=UTF-8
Content-Encoding: UTF-8
Content-Length: 138
Last-Modified: Wed, 08 Jan 2003 23:11:55 GMT
Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux)
ETag: "3f80f-1b6-3e1cb03b"
Accept-Ranges: bytes
Connection: close

<html>
<head>
  <title>An Example Page</title>
</head>
<body>
  Hello World, this is a very simple HTML document.
</body>
</html>

Toda mensagem HTTP recebe um código como resposta. Para uma breve lista deles, consulte: https://developer.mozilla.org/en-US/docs/Web/HTTP/Status

O protocolo possui diferentes métodos, sendo os mais conhecidos:

  • GET: parâmetros enviados diretamente pela URL;
  • POST: parâmetros enviados no corpo da mensagem.

Sobre todos os métodos e parâmetros possíveis em um cabeçalho HTTP, consulte: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers

Para realizar um teste de uma mensagem HTTP, é possível utilizar os comandos telnet e nc (netcat). A seguir, um exemplo com nc é descrito.

Em ambientes Unix e GNU/Linux, é provável que o comando nc já esteja instalado.

Em sistemas Windows, é possível utilizar a maquina virtual com vagrant ou instalar o comando nc.

Instalando o nc no Windows

Baixe o seguinte arquivo:

https://joncraton.org/files/nc111nt.zip

Descompacte o arquivo nc.exe em uma pasta de fácil acesso. A senha para descompactar é “nc”.

Agora, basta acessar pelo terminal (gitbash) a pasta onde o arquivo foi descompactado e utilizar o comando nc para executar o programa.

Exemplo de mensagem HTTP com nc

Para simular uma mensagem HTTP, é preciso informar ao nc qual o endereço queremos acessar (do servidor) e qual a porta devemos tentar conexão. Em geral, servidores de página WEB escutam na porta 80.

nc example.com 80

O camando ficará em modo de espera para digitarmos a mensagem a ser enviada. Se prefirir, copie e cole o exemplo abaixo:

GET / HTTP/1.1
Host: example.com

Como cabeçalho HTTP deve terminar com uma linha vazia, lembre-se de pressionar Enter duas vezes. Para sair do comando nc, pressione CTRL-D.

Se desejar, é possível salvar a mensagem em um arquivo, digamos teste.http e passar o conteúdo do arquivo diretamente ao nc com o seguinte comando:

cat teste.http - | nc example.com 80

Caraterísticas importantes do HTTP

  • Protocolo sem estado (state-less);
  • Conexões persistentes a partir do HTTP 1.1;
  • Possibilidade do uso de Cookies:
    • Enviados no cabeçalho da mensagem;
    • Servidor solicita o salvamento de pequenos conjuntos chaveXvalor no cliente;
    • Permeia questões de segurança.
  • HTTPS:
    • TLS/SSL;
    • Mensagens criptografadas;
    • Certificação do cliente e do servidor.

Ferramentas de desenvolvimento no seu navegador

Qualquer navegador Web decente, disponibiliza ferramentas de desenvolvimento. Com elas, é possível explorar todos os detalhes envolvidos nas páginas exibidas pelo navegador, como: HTML, CSS, Javascript, mensagens HTTP trocadas, console de comandos, etc.

Explore as ferramentas no seu navegador. Em geral, o atalho CTRL+SHIFT+I ativa tais ferramentas.

O uso dos navegadores Internet Explorer e Microsoft Edge não são indicados para essa disciplina.

Navegadores indicados:

  • Mozilla Firefox;
  • Chromium e afins;
  • Opera.

Prática

Faça requisições HTTP para diferentes sites e analise as respostas obtidas. Utilize algumas das ferramentas abaixo:

  • Seu navegador;
  • Comandos como o nc;
  • Extensões para navegadores;
  • https://httpie.org/run

1 Tenha sempre em mente que são raras as vezes em que a Wikipedia pode ser utilizada como uma referência científica relevante.

Aula - HTML5: Estrutura Semântica e Acessibilidade

Bibliografia Recomendada

HyperText Markup Language

O HTML (HyperText Markup Language), é, como o nome diz, uma linguagem de marcação para criação de documento hipertexto.

Estrutura Base e Declaração de Idioma

Diferente das versões anteriores, o HTML5 simplificou o doctype. É obrigatório definir o atributo lang na tag html para acessibilidade (leitores de tela) e SEO.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Título do Documento</title>
</head>
<body>
    
</body>
</html>

Tags e atributos

A linguagem conta com um conjunto de palavras-chave denominadas tags. De maniera geral, uma tag possui o seguinte formato:

<nome_tag atributo1="valor1" atributo2="valor2" ...>conteúdo</nome_tag>

Onde <nome_tag ...> é chamada de tag de abertura e </nome_tag> é denominada tag de fechamento. Vale ressaltar que nem todas as tads possuem fechamento, nesse caso, a sintaxe é a seguinte:

<nome_tag atributo1="valor1" atributo2="valor2" ... />

Cada tag pode receber zero ou mais atributos. Um atributo indica características referentes a tag em questão. Por exemplo:

<a href="http://www.tads.ufpr.br">Moodle do TADS</a>

A tag acima irá produzir um link (ou âncora) para a url http://www.tads.ufpr.br, sendo exibida na página com o texto Moodle do TADS. Algo semelhante a isso: Moodle do TADS.

Isso ocorre pois a tag a indica a criação de um link e, por meio do parâmentro href, o navegador sabe para qual URL o link deve levar ao ser clicado.

Características do HTML

O HTML deve ser utilizado para especificar apenas duas coisas:

  • O conteúdo do documento (títulos, parágrafos, figuras, etc.);
  • A estrutura do documento (isso é um título, aquilo é um link).

Ou seja, o HTML deve ser utilizado para definir a semântica do seu conteúdo, seu significado. Não se deve utilizar o HTML para indicar nenhum tipo de formatação ou posicionamento do conteúdo.

Sintaxe e Boas Práticas

  • Case Sensitivity: Embora o navegador aceite maiúsculas, o padrão de mercado e as normas da W3C exigem tags e atributos em minúsculo.
  • Aspas: Atributos devem ser envolvidos por aspas duplas ("").
  • Self-closing tags: No HTML5, a barra em tags vazias (ex: <br />) é opcional, mas o uso de <br> ou <img> é preferível por simplicidade.
  • Ferramental: Utilize editores de texto para produzir seus arquivos HTML. O VS Code pode ser uma boa opção, mas você pode utilizar qual preferir.

HTML5

O HTML5 é a quinta e atual versão principal da HyperText Markup Language, o padrão da W3C para a estruturação de conteúdos na Web. Diferente de suas versões anteriores, o HTML5 evoluiu de uma simples linguagem de marcação para uma plataforma de desenvolvimento completa, introduzindo elementos semânticos (como <article>, <section> e <nav>), suporte nativo a multimídia (tags <video> e <audio>), e APIs poderosas para armazenamento local e geolocalização. Sua arquitetura foi projetada para reduzir a dependência de plugins proprietários e garantir que as aplicações web funcionem de forma consistente e responsiva em diversos dispositivos e navegadores.

Práticas modernas de Semântica e Estruturação do DOM

As principais tags introduzidas no HTML5 que o diferenciam das versões anteriores (como o HTML 4.01) focam em substituir o uso genérico de <div> por elementos que descrevem a função do conteúdo para navegadores e tecnologias assistivas.

Tags de Estrutura Semântica

  • <header>: Define o cabeçalho de uma página ou seção, geralmente contendo logotipos e navegação.
  • <nav>: Identifica blocos que contêm links de navegação.
  • <main>: Delimita o conteúdo principal e exclusivo do documento.
  • <article>: Representa uma composição autônoma (post, comentário, notícia).
  • <section>: Agrupa conteúdos logicamente relacionados em um mesmo tema.
  • <aside>: Define conteúdos tangenciais, como barras laterais ou anúncios.
  • <footer>: Define o rodapé de uma página ou seção.

Tags de Mídia e Gráficos

  • <video>: Permite a reprodução de arquivos de vídeo nativamente, sem necessidade de plugins como o Flash.
  • <audio>: Proporciona suporte nativo para execução de arquivos sonoros.
  • <canvas>: Define uma área para renderização de gráficos e animações dinâmicas via JavaScript.
  • <svg>: Permite a incorporação direta de gráficos vetoriais escaláveis no código HTML.

Tags de Organização de Conteúdo e Formulários

  • <figure> e <figcaption>: Agrupam uma mídia (imagem, gráfico) e sua respectiva legenda.
  • <mark>: Utilizada para destacar ou realçar trechos de texto.
  • <time>: Representa datas e horários em um formato legível por máquinas.
  • <datalist>: Define uma lista de opções pré-definidas para controles de entrada de formulário.

Tags de Conteúdo e Acessibilidade

Imagens e Atributo alt

O atributo alt é obrigatório para acessibilidade. Descreve a imagem para deficientes visuais e mecanismos de busca.

<img src="logo-ufpr.png" alt="Logotipo da Universidade Federal do Paraná">

Para links externos, utilize rel="external" ou target="_blank".

<a href="https://www.tads.ufpr.br" target="_blank" rel="noopener">Portal TADS</a>

Formulários e Validação Nativa

O HTML5 introduziu tipos de input que realizam validação no lado do cliente sem necessidade de JavaScript inicial.

Exemplo de Formulário Técnico

<form action="processar.php" method="POST">
    <fieldset>
        <legend>Dados Pessoais</legend>
        
        <label for="nome">Nome Completo:</label>
        <input type="text" id="nome" name="nome" required placeholder="Digite seu nome">

        <label for="email">E-mail:</label>
        <input type="email" id="email" name="email" required>

        <label for="nascimento">Data de Nascimento:</label>
        <input type="date" id="nascimento" name="nascimento">
    </fieldset>

    <fieldset>
        <legend>Preferências</legend>
        
        <label>Gênero:</label>
        <input type="radio" id="m" name="genero" value="M"> <label for="m">Masculino</label>
        <input type="radio" id="f" name="genero" value="F"> <label for="f">Feminino</label>

        <label for="veiculo">Veículo:</label>
        <select id="veiculo" name="veiculo">
            <option value="">Selecione...</option>
            <option value="carro">Carro</option>
            <option value="moto">Moto</option>
        </select>
    </fieldset>

    <button type="submit">Enviar Dados</button>
</form>

Principais Atributos de Validação

  • required: Torna o campo obrigatório.
  • pattern: Define uma Expressão Regular (Regex) para validação.
  • min / max: Define limites numéricos ou de data.
  • step: Define o intervalo de incremento para números.

Elementos de Bloco vs. Em Linha (Inline)

  • Block-level: Ocupam toda a largura disponível e começam em uma nova linha. Exemplos: <div>, <h1>, <p>, <ul>, <li>, <header>.
  • Inline: Ocupam apenas a largura necessária e não quebram linha. Exemplos: <span>, <a>, <strong>, <em>, <img>.

Exercícios Práticos: Estrutura e Semântica HTML5

Os exercícios abaixo devem ser realizados no VS Code, seguindo a indentação padrão (2 ou 4 espaços) e as normas de acessibilidade discutidas.

Exercício 01: Esqueleto Semântico

Crie um arquivo chamado index.html que represente a estrutura de um portal de notícias. O documento deve conter:

  1. Header: Contendo um <h1> com o nome do portal e um <nav> com uma lista não ordenada (<ul>) de categorias (Home, Brasil, Tecnologia, Contato).
  2. Main: Contendo dois elementos <article>.
  • Cada article deve ter um <h2> (título da notícia) e um <p> (resumo).
  1. Aside: Uma barra lateral com links para “Postagens mais lidas”.
  2. Footer: Informações de copyright e endereço.

Exercício 02: Formulário de Cadastro de Produtos

Desenvolva um formulário para um sistema de estoque (cadastro_produto.html). Utilize as tags de formulário e validações nativas:

  • Nome do Produto: Campo de texto obrigatório.
  • Código SKU: Campo de texto que aceite apenas o padrão de 3 letras seguidas de 4 números (Dica: use o atributo pattern="[A-Z]{3}[0-9]{4}").
  • Quantidade em Estoque: Campo numérico (number) com valor mínimo de 0 e máximo de 100.
  • Categoria: Um componente <select> com as opções: Eletrônicos, Móveis e Alimentos.
  • Descrição: Um <textarea> com limite de 200 caracteres.
  • Data de Recebimento: Campo do tipo date.
  • Botões: Um botão para “Limpar” (type="reset") e outro para “Cadastrar” (type="submit").

Exercício 03: Tabela de Dados Técnicos

Crie uma página que exiba uma tabela de especificações de hardware. A tabela deve seguir a estrutura semântica correta:

  • Utilize as tags <thead>, <tbody> e <tfoot>.
  • Colunas: Componente, Especificação e Preço Médio.
  • Inclua pelo menos 3 linhas de dados (ex: Processador, Memória RAM, SSD).
  • No <tfoot>, utilize o atributo colspan para criar uma célula que ocupe as duas primeiras colunas com o texto “Total Estimado” e exiba o valor na terceira coluna.

Exercício 04: Acessibilidade e Mídia

Implemente uma página de galeria simples:

  1. Insira uma imagem de um componente de hardware.
  2. Garanta que o atributo alt descreva a imagem tecnicamente.
  3. Utilize a tag <figure> para envolver a imagem e a tag <figcaption> para adicionar uma legenda visível abaixo dela.
  4. Crie um link que, ao ser clicado, faça o download de um manual em PDF (Dica: utilize o atributo download na tag <a>).

Validação

Para validar seus exercícios, utilize o W3C Markup Validation Service. O código não deve apresentar erros ou avisos (warnings).

Aula CSS3: Fundamentos, Layout e Responsividade

Bibliografia Recomendada

Cascading Style Sheets (CSS3)

O CSS (Cascading Style Sheets) é a linguagem de folha de estilo utilizada para descrever a apresentação de um documento escrito em HTML. Sua principal função no desenvolvimento web é garantir a estrita separação entre a estrutura/semântica (HTML) e a apresentação visual (CSS).

Formas de Adicionar CSS ao HTML

Existem três métodos de integração, sendo o uso de arquivos externos o único recomendado para sistemas em produção:

  1. Atributo Style (Inline): Aplica o estilo diretamente na tag. Tem a maior especificidade, mas fere o princípio de separação de responsabilidades. Não recomendado.
<p style="color: red; text-align: center;">Texto do parágrafo</p>
  1. Tag <style> (Interno): Inserido no <head> do documento HTML.
<head>
    <style>
        p { color: red; }
    </style>
</head>
  1. Arquivo Externo (Recomendado): Importação de um arquivo .css via tag <link> no <head>.
<head>
    <link rel="stylesheet" href="estilo.css">
</head>

Sintaxe e Seletores

A sintaxe baseia-se em uma declaração composta por uma propriedade e um valor, encapsulada em um bloco vinculado a um seletor.

/* Seletor de Elemento (Tag) */
h1 {
    color: white;
    text-align: center;
}

/* Seletor de Classe (.) - Reutilizável em múltiplos elementos */
.alerta {
    color: red;
    font-weight: bold;
}

/* Seletor de ID (#) - Deve ser único na página */
#menu-principal {
    background-color: #333;
}

/* Pseudo-classes (Estado do elemento) */
a:hover {
    text-decoration: underline;
}

Cascata e Especificidade

O termo “Cascading” refere-se ao algoritmo que o navegador utiliza para determinar qual regra CSS será aplicada quando há conflitos.

A resolução de conflitos segue a hierarquia de Especificidade:

  1. Inline style: Maior peso.
  2. IDs: Peso alto (ex: #cabecalho).
  3. Classes, atributos e pseudo-classes: Peso médio (ex: .card, [type="text"], :hover).
  4. Elementos e pseudo-elementos: Menor peso (ex: h1, div, ::before).

Se duas regras tiverem a mesma especificidade, a que foi declarada por último no código (cascata) prevalece.

Box Model (Modelo de Caixa) e Unidades de Medida

No CSS, todo elemento HTML é renderizado como uma caixa retangular.

  • Content: A área onde o texto ou imagem é exibido.
  • Padding: Espaçamento interno (entre o conteúdo e a borda).
  • Border: A borda que envolve o padding e o conteúdo.
  • Margin: Espaçamento externo (afasta o elemento dos elementos adjacentes).

Boa prática: Utilize a propriedade box-sizing: border-box; no reset global para garantir que o cálculo da largura (width) e altura (height) inclua o padding e a border, evitando quebras de layout.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Unidades de Medida Modernas

O uso exclusivo de pixels (px) é desencorajado em layouts modernos.

  • rem: Relativo ao tamanho da fonte do elemento raiz (<html>). Ideal para fontes e margens, pois respeita a configuração de acessibilidade do navegador do usuário.
  • %: Percentual em relação ao elemento pai.
  • **vw / vh**: Largura (viewport width) e altura (viewport height) relativas à janela do navegador.

Exercícios Práticos: Fundamentos de CSS3 (Pré-Layout)

Criar um arquivo index.html e um arquivo style.css na mesma pasta, realizando a vinculação através da tag <link>.

Exercício 01: Teste de Especificidade e Cascata

Objetivo: Compreender a hierarquia de aplicação de estilos e o cálculo de especificidade do navegador.

HTML base (index.html):

<div class="artigo" id="noticia-principal">
    <h2 class="titulo">Lançamento do Novo Sistema</h2>
    <p class="texto destaque">O sistema entrará em produção na próxima semana.</p>
</div>

Requisitos (CSS):

  1. Crie uma regra utilizando o seletor de tag p e defina a cor do texto como azul.
  2. Crie uma regra utilizando o seletor de classe .texto e defina a cor do texto como verde.
  3. Crie uma regra utilizando o seletor de classe .destaque e defina a cor do texto como laranja.
  4. Crie uma regra encadeada .artigo p.destaque e defina a cor como roxo.
  5. Adicione um estilo inline diretamente na tag <p> no HTML definindo a cor como vermelho.

Exercício 02: Tipografia, Cores e Unidades Relativas (rem)

Objetivo: Aplicar fontes externas e utilizar a unidade de medida rem atrelada ao elemento raiz.

Requisitos (CSS):

  1. Importe a fonte “Roboto” ou “Open Sans” do Google Fonts via @import no início do arquivo CSS.
  2. Defina no seletor html o font-size: 16px;.
  3. Defina a fonte importada para o seletor body e aplique uma cor de fundo utilizando a notação Hexadecimal (ex: #f4f4f9).
  4. Estilize um elemento <h1>: defina o tamanho da fonte para 2.5rem e a cor do texto utilizando a notação rgba() com 80% de opacidade.
  5. Estilize um elemento <p>: defina o tamanho para 1rem, o espaçamento entre linhas (line-height) para 1.5 e o alinhamento de texto como justificado.

Exercício 03: O Box Model e box-sizing

Objetivo: Visualizar o impacto do padding e border no tamanho total de um elemento e corrigir o comportamento padrão com box-sizing.

HTML base:

<div class="caixa padrao">Caixa 1: Content-Box</div>
<div class="caixa corrigida">Caixa 2: Border-Box</div>

Requisitos (CSS):

  1. Para a classe .caixa, defina width: 300px, height: 150px, cor de fundo amarela e margin-bottom: 20px.
  2. Para ambas as caixas, adicione um padding de 30px e uma border sólida preta de 5px.
  3. Na classe .corrigida, adicione a propriedade box-sizing: border-box;.

Exercício 04: Display e Centralização de Bloco

Objetivo: Manipular os valores da propriedade display (block, inline, inline-block) e aplicar centralização horizontal com margens automáticas.

HTML base:

<section class="container">
    <a href="#" class="botao">Clique Aqui</a>
    <a href="#" class="botao">Saiba Mais</a>
</section>

Requisitos (CSS):

  1. Para a classe .container, defina width: 50%, uma cor de fundo cinza clara e aplique margin: 0 auto; para centralizar a seção horizontalmente na página.
  2. A tag <a> por padrão é inline. Altere a classe .botao para display: inline-block;.
  3. Defina para os botões:
  • padding: 10px 20px;
  • margin-right: 15px;
  • Cor de fundo azul, texto branco e remova o sublinhado (text-decoration).
  1. Adicione uma pseudo-classe :hover aos botões para alterar a cor de fundo para um azul mais escuro quando o mouse passar sobre eles.

Layouts Modernos: Flexbox e CSS Grid

Modelos de layout atuais substituem o uso de float e tabelas para posicionamento.

1. Flexbox (Layout Unidimensional)

Projetado para alinhar itens em uma única dimensão (linha ou coluna) e distribuir o espaço dinamicamente.

.flex-container {
    display: flex;
    flex-direction: row;            /* Organiza em linha */
    justify-content: space-between; /* Espaçamento horizontal */
    align-items: center;            /* Alinhamento vertical cruzado */
    gap: 15px;                      /* Espaçamento entre os filhos (CSS moderno) */
}

2. CSS Grid (Layout Bidimensional)

Projetado para organizar elementos simultaneamente em linhas e colunas.

.grid-container {
    display: grid;
    /* Cria 3 colunas: as das extremidades com 1 fração de espaço e a central com 2 */
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto 200px;
    gap: 20px;
}

Design Responsivo (Media Queries)

A responsividade garante que a interface se adapte a diferentes tamanhos de tela. O padrão de mercado é a abordagem Mobile-first: o CSS base é escrito para telas pequenas, e media queries são utilizadas para adaptar o layout para telas maiores.

/* Estilo base (Mobile - telas pequenas) */
.coluna {
    width: 100%;
}

/* Breakpoint para Tablets e Desktops (mínimo de 768px de largura) */
@media screen and (min-width: 768px) {
    .coluna {
        width: 50%; /* Passa a ocupar metade da tela */
    }
}

Aula 06 - Javascript

Bibliografia recomendada para o tema:

Javascript

Javascript é uma linguagem de programação originalmente projetada para dar maiores possibilidades à paginas WEB. O primeiro navegador a implementá-la foi o Netscape, em meados de 1995. A intenção era que as páginas web pudessem rodar pequenos programas no próprio navegador.

Depois de sua larga adoção por outros navegadores, uma referência padrão para a linguagem foi escrita pela Organização Internacional ECMA. Dessa forma, os navegadores poderiam implementar uma versão em comum do Javascript e os programas escritos nessa linguagem seriam executados sem dificuldades por qualquer navegador. Esse padrão se chama ECMAScript e é, desde então, o nome mais oficial, e menos conhecido, do Javascript. Atualmente, a maioria dos navegadores já é compatível com a versão 5 do ECMAScript, e estão em processo de preparação para a versão 6. Em geral, pode-se utilizar o termo Javascript ao invés de ECMAScript sem maiores problemas.

Embora o nome possa sugerir, o Javascript não possui nenhuma relação com a linguagem de programação Java. É uma caso de escolha infeliz de um nome. Ao tempo em que o Javascript estava sendo produzido, a linguagem Java estava em evidência no mercado. Por essa razão, os produtores do Javascript pensaram ser uma boa jogada de marketing relacionar os nomes das duas linguagens. Porém, as semelhanças acabam por aí.

Nos dias de hoje, o Javascript possui um papel muito importante nas aplicações Web. É utilizado na manipulação dos elementos da própria página Web, até em comunicações HTTP assíncronas.

Além disso, o Javascript passou a ser utilizado em aplicações que rodam fora de navegadores. Exemplo disso é a grande popularidade do Runtime de Javascript chamado Node.js. Com o Node.js, é possível escrever as mais variadas aplicações em Javascript nativo, desde comandos de terminais até aplicações robustas de cliente-servidor.

Exemplo de código Javascript:

function soma(a,b){
    return(a+b);
}

console.log(soma(2,10));
// -> 10

Utilizando JS em páginas Web

Para incluir um código JS em um arquivo HTML, temos duas opções:

  1. Incluir o código JS diretamente no HTML;
  2. Utilizar um arquivo JS externo e referenciá-lo no HTML.

Ambas as opções acima utilizam a tag <script>. Por exemplo, para incluir o código script diretamente no HTML:

<!DOCTYPE html>
<html>
<head>
  <script>
    function myFunction() {
        document.getElementById("demo").innerHTML = "Paragraph changed.";
    }

    console.log("ola mundo!");
  </script>
</head>

<body>
  <h1>A Web Page</h1>
  <p id="demo">A Paragraph</p>
  <button type="button" onclick="myFunction()">Try it</button>
</body>
</html>

E, para utilizar um arquivo externo, suponha o seguinte arquivo JS:

// teste.js
console.log("ola mundo");

<!DOCTYPE html>
<html>
<head>
  <script src="teste.js"></script>
</head>

<body>
  <h1>A Web Page</h1>
  <p id="demo">A Paragraph</p>
</body>
</html>

As duas opções podem ser utilizadas tanto dentro da tag <head> quanto da tag <body>. Existe uma tendência de adicionar códigos JS ao final da tag <body>. Dessa forma, a página pode ter um carregamento mais rápido, principalmente no caso de existirem scripts JS complexos. Entretanto, não existe uma regra que determine onde um JS deve ser incluído no arquivo HTML.

Vale salientar o uso do comando console.log. Através dele é possível exibir mensagens no terminal de comandos (console) do navegador (acesse-o pelas ferramentas de desenvolvimento do seu navegador).

Exemplos simples com laços

let i;

for(i=0;i<10;i++){
    console.log(i);
}

i = 0;
while(i<10){
    if(i % 2 == 0)
      console.log(i);
    i++;
}

Vale salientar que o JS possui tipagem dinâmica:

let i;
i = 10;
i = 12.34;
i = "Teste";
i = [1,2,"as",12];

Funções

Talvez o recurso que produza maior confusão aos iniciantes em JS seja o conceito de função desta linguagem. Segue um exemplo simples:

function square(x) {
  return x * x;
};

console.log(square(12));
// → 144

Entretanto, o mesmo exemplo pode ser reescrito da seguinte maneira:

var square = function(x) {
  return x * x;
};

console.log(square(12));
// → 144

No exemplo acima, pode-se notar dois conceitos. O primeiro é o que chamamos de função anônima. Trata-se da declaração de uma função sem nome (perceba que não existe nome entre function e (x)). Funções anônimas são um recurso muito utilizado em JS, pois é bastante útil quando relacionado ao segundo conceito exposto no código acima: atribuição de funções à variáveis.

Em JS, uma função é, na verdade, um tipo de dado (tipo function). Esse tipo de dado armazena uma sequência de código (código da função) e pode ser armazenado em variáveis. Uma variável que armazena uma função, pode ser executada posteriormente, como no exemplo acima. Basta se utilizar do operador (). Mais exemplos:

var makeNoise = function() {
  console.log("Pling!");
};

makeNoise();
// → Pling!

const power = function(base, exponent) {
  let result = 1;
  for (let count = 0; count < exponent; count++)
    result *= base;
  return result;
};

console.log(power(2, 10));
// → 1024

Outro conceito importante em JS é o escopo de variáveis. O escopo define em quais partes do código uma dada variável estará disponível. O escopo de uma variável depende de onde ela foi declarada.

let x = "outside";

const f1 = function() {
  let x = "inside f1";
};
f1();
console.log(x);
// → outside

const f2 = function() {
  x = "inside f2";
};
f2();
console.log(x);
// → inside f2

Variáveis não declaradas com o operador var serão consideradas Globais.

Tipos de dados

Em JS existem apenas 5 tipos de dados que podem armazenar valores:

  • string
  • number
  • boolean
  • object
  • function

E 2 tipos de dados que não armazenam valores:

  • null
  • undefined
typeof "John"                 // Returns "string"
typeof 3.14                   // Returns "number"
typeof NaN                    // Returns "number"
typeof false                  // Returns "boolean"
typeof [1,2,3,4]              // Returns "object"
typeof {name:'John', age:34}  // Returns "object"
typeof new Date()             // Returns "object"
typeof function () {}         // Returns "function"
typeof myCar                  // Returns "undefined" *
typeof null                   // Returns "object"

Cuidado, o JS faz conversões automáticas de tipo quando necessário. Mais informações em https://www.w3schools.com/js/js_type_conversion.asp

Exemplos com Array

let listOfNumbers = [2, 3, 5, 7, 11];
console.log(listOfNumbers[1]);
// → 3
console.log(listOfNumbers[1 - 1]);
// → 2

function pares(n){
  let result = [];
  let x = 0, i;

  for(i=0; i<n; i++){
    result.push(x);
    x+=2;
  }
  return(result);
}

console.log(pares(10));
// -> (10) [0, 2, 4, 6, 8, 10, 12, 14, 16, 18]

i = 0;
while(i<10){
    if(i % 2 == 0)
      console.log(i);
    i++;
}

Closures (apenas como curiosidade)

Considere o seguinte código:

function multiplier(factor) {
  return function(number) {
    return number * factor;
  };
}

let twice = multiplier(2);
console.log(twice(5));
// → 10

Perceba que a função multiplier retorna uma outra função. Porém, lembre-se que funções podem ser salvas em variáveis. E é exatamente isso que acontece na variável twice. A função retornada pela função multiplier é salva na variável twice, a qual é executada logo na sequência. Legal, não?

Consegue compreender o seguinte código?

const add = (function () {
    let counter = 0;
    return function () {return counter += 1;}
})();

add();
add();
add();

// the counter is now 3

Mais informações em: https://www.w3schools.com/js/js_function_closures.asp

Aula 7 - DOM

Bibliografia recomendada para o tema:

Repositório com starter code para a aula:

https://gitlab.com/ds122-alexkutzke/ds122-dom-example

DOM (Document Object Model)

O DOM (Documet Object Model) é um padrão estabelecido pelo W3C que define como a linguagem Javascript pode acessar e modificar um documento HTML dentro do navegador. Em outras palavras, o DOM pode ser entendido como uma API de acesso ao documento exibido pelo navegador. Por meio dessa API, programas escritos em Javascript podem, facilmente, acessar e modificar quaisquer características de um documento HTML.

Manipulação do DOM

Por se tratar de um padrão emitido pelo W3C, a maioria dos navegadores possui, nativamente, a implementação do DOM. Essa API é composta por um objeto JS chamado document que representa integralmente o documento HTML que está sendo exibido pelo navegador.

Arquitetura do DOM

Dessa forma, os programas Javascript rodados em navegadores possuem acesso à uma variável global com o nome de document. E, a partir dela, a todas operações possíveis sobre o documento.

Seleção de elementos

Em geral, quando é necessário manipular um documento HTML a partir do DOM, temos que identificar o elemento a ser alterado. Um elemento nada mais é do que um componente que faz parte do documento (como um parágrafo, um título, um link, etc.).

Existem algumas formas de seleção de elementos permitidos pelo DOM. A seguir, seguem alguns exemplos:

// Seleção por id
var x = document.getElementById("teste");

// Seleção por nome de Tag
var x = document.getElementsByTagName("p");

// Seleção por classe
var x = document.getElementsByClassName("intro");

// Seleção por seletores CSS
var x = document.querySelectorAll("p.intro");

// Seleção por coleções pré-existentes (ver mais em w3schools)
var x = document.forms

Cada elemento do DOM possui atributos e métodos utilizados para alterar as propriedades do elemento no documento. Por exemplo, os comandos abaixo realizam alterações em elementos do DOM:

// Altera todo o body
document.write(Date());

// Altera o conteúdo do elemento com id igual a "p1"
document.getElementById("p1").innerHTML = "Novo conteudo!";

// Cada elemento pode ser atribuído em uma variável e alterado posteriormente
var element = document.getElementById("header");
element.innerHTML = "Novo texto";

// Altera um atributo do elemento com id igual "myImage"
document.getElementById("myImage").src = "landscape.jpg";

// Altera propriedades CSS
document.getElementById("p2").style.color = "blue";

Cada elemento do DOM pode possuir elementos filhos, ancestrais e irmãos. É possível, através da API DOM “navegar” por esses elementos.

É possível utilizar os seguintes atributos para navegar entre os elementos do DOM:

  • parentNode
  • childNodes[nodenumber]
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling
// primeiro filho de um elemento
var myTitle = document.getElementById("demo").firstChild.nodeValue;

// primeiro filho de um elemento (utilizando o array childNodes)
var myTitle = document.getElementById("demo").childNodes[0].nodeValue;

É possível, ainda, criar novos elementos em um arquivo html utilizando Javascript:

// Cria uma nova tag <p>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);

var element = document.getElementById("div1");
element.appendChild(para);

Para mais detalhes, consulte: https://www.w3schools.com/js/js_htmldom_nodes.asp

Eventos

Boa parte da programação realizada utilizando Javascript em navegadores trabalha sobre um paradigma orientado a eventos. Um evento é algo que ocorre no navegador, como: um clique, o carregamento da página, redimensionamento da janela do navegador, movimento do mouse, etc.

Isso significa que os programas são, em geral, um conjunto de funções executadas quando certos eventos ocorrem. Por exemplo, “uma função X é executada sempre que um dado link é clicado”.

Existem algumas formas de atribuir uma função a um dado evento:

<!-- Evento como atributo -->
<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>

<h1 onclick="funcaoX()">Click on this text!</h1>

<body onload="funcaoW()">

// Evento como atributo de elemento do DOM
document.getElementById("myBtn").onclick = displayDate;

Para atribuirmos mais de uma função a um mesmo evento, utilizamos eventListeners:

// A função displayDate será executada quando o elemento de id = "myBtn" for clicado
// Note que, nesse caso, não existe o "on" no nome do evento
document.getElementById("myBtn").addEventListener("click", displayDate);

Eventlisteners são úteis para separar o código HTML do código Javascript.

// Exemplo com objeto event (ev)
var f = function(ev){
  ev.target.style.color = "red";
};

document.getElementById("demo").addEventListener("click", f);

// Atribuir o evento a todos os paragrafos do documento
var ps = document.getElementsByTagName("p");

for (var i = 0; i < ps.length; i++) {
  ps[i].addEventListener("click",f);
}

Exercícios Práticos: JavaScript, DOM e Eventos

Nível 1: Fundamentos da Interatividade

Exercício 1: Alerta de Boas-Vindas Personalizado

  • Objetivo: Introduzir a captura de valor de um input e a resposta a um clique de botão.
  • Descrição: Crie uma página HTML com:
    1. Um campo de texto (<input type="text">) com um id para que o usuário possa digitar seu nome.
    2. Um botão (<button>) com o texto “Enviar”.
    3. Ao clicar no botão, seu script JavaScript deve ler o nome digitado no campo de texto e exibir um alerta de boas-vindas na tela, como por exemplo: Olá, [Nome do Usuário]! Bem-vindo(a)!.
  • Conceitos-chave: document.getElementById(), addEventListener('click', ...), .value, alert().
  • Desafio Bônus: Se o usuário clicar no botão sem ter digitado nada, exiba um alerta diferente pedindo para que ele preencha o nome.

Exercício 2: Paleta de Cores

  • Objetivo: Praticar a manipulação de estilos CSS através do JavaScript.
  • Descrição: Desenvolva uma página com:
    1. Três ou mais botões, cada um representando uma cor (ex: “Vermelho”, “Verde”, “Azul”).
    2. Ao clicar em um dos botões, o <body> da página deve ter sua cor de fundo (backgroundColor) alterada para a cor correspondente.
  • Conceitos-chave: document.querySelector(), element.style, manipulação de múltiplos elementos.
  • Desafio Bônus: Adicione um botão “Aleatório” que, ao ser clicado, muda a cor de fundo para uma cor hexadecimal gerada aleatoriamente (ex: #f1f5f8).

Exercício 3: Contador de Cliques

  • Objetivo: Manipular o conteúdo de texto de um elemento e trabalhar com variáveis em JavaScript.
  • Descrição: Crie uma página com:
    1. Um parágrafo (<p>) que inicia exibindo o número 0.
    2. Um botão com o texto “Incrementar”.
    3. Cada vez que o botão for clicado, o número exibido no parágrafo deve ser incrementado em 1.
  • Conceitos-chave: textContent ou innerText, declaração e atualização de variáveis.
  • Desafio Bônus: Adicione um segundo botão, “Decrementar”, que diminui o valor do contador. O contador nunca deve ficar abaixo de zero.

Nível 2: Manipulação Dinâmica e Formulários

Exercício 4: Lista de Tarefas (To-Do List)

  • Objetivo: Praticar a criação, adição e remoção de elementos no DOM de forma dinâmica.
  • Descrição: Construa uma interface de lista de tarefas que permita ao usuário:
    1. Digitar uma nova tarefa em um campo de texto (<input type="text">).
    2. Clicar em um botão “Adicionar” para que a tarefa seja inserida como um novo item (<li>) em uma lista não ordenada (<ul>) na página.
    3. Cada item da lista deve ter um botão “Remover” ao seu lado. Ao ser clicado, este botão deve excluir o item da lista correspondente.
  • Conceitos-chave: document.createElement(), element.appendChild(), element.remove(), event.target.
  • Desafio Bônus: Adicione uma funcionalidade para que, ao clicar no texto de uma tarefa, ela seja marcada como “concluída” (por exemplo, aplicando um estilo de texto riscado com text-decoration: line-through).

Exercício 5: Validação de Formulário em Tempo Real

  • Objetivo: Utilizar eventos de formulário e teclado para fornecer feedback instantâneo ao usuário.
  • Descrição: Crie um formulário de cadastro com campos para nome, e-mail e senha. Implemente as seguintes validações que acontecem enquanto o usuário digita:
    1. Nome: Não pode estar vazio.
    2. E-mail: Deve conter o caractere @.
    3. Senha: Deve ter no mínimo 8 caracteres. Abaixo de cada campo, exiba uma mensagem de erro (ex: em um <p> com cor vermelha) assim que a regra for violada. A mensagem deve desaparecer quando o campo se tornar válido novamente.
  • Conceitos-chave: addEventListener('keyup', ...) ou addEventListener('input', ...) , element.classList para estilização, condicionais, .length, .includes().
  • Desafio Bônus: Adicione um campo de “Confirmar Senha” e valide se o seu valor é idêntico ao do campo “Senha”. Além disso, desabilite o botão de “Cadastrar” do formulário enquanto houver algum erro de validação.

Exercício 6: Galeria de Imagens com Modal

  • Objetivo: Criar uma experiência de usuário mais rica com a exibição de um modal.
  • Descrição: Desenvolva uma galeria com várias imagens em miniatura.
    1. Crie uma seção na página com pelo menos 4 imagens pequenas (<img>).
    2. Ao clicar em qualquer uma das miniaturas, uma janela modal deve aparecer, sobrepondo o restante do conteúdo.
    3. O modal deve conter a imagem que foi clicada, porém em um tamanho maior.
    4. O modal também deve ter um botão “Fechar” (um “X” no canto, por exemplo) que, ao ser clicado, o esconde.
  • Conceitos-chave: Manipulação da propriedade display ou de classes para mostrar/esconder elementos, capturar atributos (getAttribute('src')), estrutura HTML/CSS para overlays.
  • Desafio Bônus: Permita que o usuário feche o modal também ao pressionar a tecla Esc no teclado ou ao clicar fora da área da imagem (no overlay).

Nível 3: Aplicações Complexas e Gerenciamento de Estado

Exercício 7: Jogo da Velha (Tic-Tac-Toe)

  • Objetivo: Gerenciar o estado de um jogo, implementar lógica de vitória e reiniciar o estado da aplicação.
  • Descrição: Crie um jogo da velha funcional. A interface deve ser um grid 3x3 (pode ser feito com <div>s ou <button>s).
    1. Os jogadores, “X” e “O”, devem se alternar a cada clique em uma célula vazia.
    2. Após cada jogada, o script deve verificar se houve um vencedor (três marcas iguais em qualquer linha, coluna ou diagonal).
    3. Se houver um vencedor, exiba uma mensagem (ex: “O jogador X venceu!”) e impeça novas jogadas.
    4. Se todas as células forem preenchidas sem um vencedor, declare um empate.
    5. Adicione um botão “Reiniciar Jogo” que limpa o tabuleiro e reinicia a lógica.
  • Conceitos-chave: Arrays para representar o estado do tabuleiro, lógica condicional complexa, gerenciamento de turnos, desabilitar elementos (element.disabled).
  • Desafio Bônus: Mantenha um placar que mostre quantas vitórias cada jogador (X e O) acumulou durante a sessão.

Exercício 8: Arrastar e Soltar (Drag and Drop)

  • Objetivo: Implementar interações avançadas utilizando a API de Drag and Drop do HTML5.
  • Descrição: Crie uma interface com duas colunas principais.
    1. A primeira coluna, “A Fazer”, deve conter uma lista de itens (ex: <div>s com texto). Esses itens devem ser “arrastáveis”.
    2. A segunda coluna, “Concluído”, deve ser uma “área de soltura”.
    3. O usuário deve ser capaz de clicar e arrastar um item da coluna “A Fazer” e soltá-lo dentro da coluna “Concluído”. Ao ser solto, o item deve se mover permanentemente para a nova coluna.
  • Conceitos-chave: Atributo draggable="true", eventos dragstart, dragover, drop, event.preventDefault(), event.dataTransfer.
  • Desafio Bônus: Permita que os itens também possam ser arrastados de volta da coluna “Concluído” para a coluna “A Fazer”. Adicione um feedback visual (ex: uma borda pontilhada) na coluna “Concluído” quando um item estiver sendo arrastado sobre ela.

Exercício 9: Filtro Dinâmico de Produtos

  • Objetivo: Simular uma aplicação de e-commerce, manipulando um conjunto de dados e atualizando a UI dinamicamente.
  • Descrição: Crie uma página para exibir uma lista de produtos.
    1. No seu arquivo JavaScript, crie um array de objetos. Cada objeto representará um produto e deve ter propriedades como id, nome, preco e categoria (ex: “Eletrônicos”, “Roupas”).
    2. Renderize todos os produtos na página, criando os elementos HTML correspondentes.
    3. Adicione os seguintes controles de filtro na página:
      • Um campo de busca (<input type="text">) para filtrar por nome.
      • Um seletor (<select>) ou checkboxes para filtrar por categoria.
      • Um input do tipo range para filtrar por preço máximo.
    4. À medida que o usuário interage com qualquer um dos filtros, a lista de produtos exibida na tela deve ser atualizada em tempo real para mostrar apenas os itens que correspondem a todos os critérios selecionados.
  • Conceitos-chave: Manipulação de arrays (filter(), map(), forEach()), combinação de múltiplos eventos (input, change), renderização dinâmica a partir de um array de dados.
  • Desafio Bônus: Adicione botões para ordenar os produtos filtrados por preço (menor para maior e maior para menor).

Aula 8 - Jquery

Bibliografia recomendada para o tema:

Repositório com starter code para a aula:

https://gitlab.com/ds122-alexkutzke/ds122-jquery-example

Jquery

Jquery é uma biblioteca Javascript que procura facilitar tarefas recorrentes utilizadas em programas dessa linguagem. A inteção dessa biblioteca é permitir ao programador “escrever menos e fazer mais”. Dentre as funcionalidades da linguagem estão:

  • Manipulação HTML/DOM;
  • Manipulação CSS;
  • Eventos HTML;
  • Efeitos e animações;
  • AJAX;
  • Utilidades.

Para utilizar o Jquery, é necessário adicionar o arquivo JS da biblioteca no HTML. Isso pode ser feito de duas formas diferentes:

<!-- Baixar o arquivo da biblioteca e adicionar no HTML -->
<head>
<script src="jquery-3.1.1.min.js"></script>
</head>

<!-- Utilizando um CDN (Content delivery network) -->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

Sintaxe

A sintaxe básica da biblioteca Jquery é a seguinte: $(selector).action(), onde:

  • O sinal $ define o acesso ao jQuery (pode, inclusive, ser substituido por JQuery);
  • O seletor é uma string para encontrar elementos HTML no DOM;
  • A ação é algo para ser realizado sobre os elementos encontrados com o seletor.
$(this).hide() // esconde o elemento "atual".

$("p").hide() // esconde todos os parágrafos.

$(".test").hide() // esconde todos os elementos com class="test".

$("#test").hide() // esconde todos os elementos com id="test".

Seletores

Dentre os seletores mais utilizados, estão os seletores iguais ao do CSS. Como . para classes, # para ids, etc.

Para mais seletores, consulte: https://www.w3schools.com/jquery/jquery_selectors.asp

Eventos

Jquery facilita o tratamento de eventos com Javascript. Um dos mais utilizados é o ready

$(document).ready(function(){

   // jQuery methods go here...

});

No código acima, o conteúdo da função será executado apenas quando a página estiver “pronta”, ou seja, quando todos os elementos do documento já foram carregados. O mesmo código acima pode ser escrito com o seguinte “atalho”:

$(function(){

   // jQuery methods go here...

});

Além do evento ready o Jquery permite a manipulação de qualquer outro evento:

// Esconde um parágrafo quando este for clicado.
$("p").click(function(){
  $(this).hide();
});

// Exibe duas mensagens: uma quando o mouse passa pelo elemento #p1 e outra quando o mouse sai do elemento
$("#p1").hover(function(){
    alert("You entered p1!");
},
function(){
    alert("Bye! You now leave p1!");
});

Outra forma de atribuir eventos a elementos com Jquery é por meio do método on:

$("p").on("click", function(){
    $(this).hide();
});

// Atribui mais de um evento em uma única chamada ao método "on"
$("p").on({
    mouseenter: function(){
        $(this).css("background-color", "lightgray");
    },
    mouseleave: function(){
        $(this).css("background-color", "lightblue");
    },
    click: function(){
        $(this).css("background-color", "yellow");
    }
});

O método on é preferível. Ele cria apenas uma única referência para a função do evento para todos os elementos selecionados. Isso permite uma economia de memória no cliente. Além disso, elementos criados dinâmicamente (após a página ter sido carregada pelo navegador), respondem a eventos criados com o on. O mesmo não acontece com métodos como o click. Nesse caso, para cada novo elemento criado, uma nova chamada para click teria que ser realizada. Mais sobre eventos sobre elementos criados dinamicamente: http://api.jquery.com/on/#direct-and-delegated-events

Para mais eventos, consulte: https://www.w3schools.com/jquery/jquery_ref_events.asp

Manipulação do DOM com Jquery

Exemplos de manipulação do DOM com Jquery:

// Esconder e mostrar
$("#hide").click(function(){
    $("p").hide();
});

$("#show").click(function(){
    $("p").show();
});

//---------------------
$("#btn2").click(function(){
    alert("HTML: " + $("#test").html());

    $(this).html("Novo conteúdo");
});

//---------------------
$("#btn1").click(function(){
    alert("Value: " + $("#test").val());
});

// --------------------
function appendText() {
    var txt1 = "<p>Text.</p>";               // Create element with HTML
    var txt2 = $("<p></p>").text("Text.");   // Create with jQuery
    var txt3 = document.createElement("p");  // Create with DOM
    txt3.innerHTML = "Text.";
    $("body").append(txt1, txt2, txt3);      // Append the new elements
}

//---------------------
$("p").css("background-color", "yellow");

Exercícios de provas anteriores

1. Considere a seguinte página web:

figura exercício

O funcionamento dela é simples. O usuário pode inserir um número inteiro em cada um dos campos de texto e selecionar uma das 4 operações matemáticas básicas (soma, subtração, multiplicação e divisão) no seletor ao centro. Em seguida, ao clicar em “Calcular!” a página resolve a expressão matemática definida pelo usuário e exibe o resultado na caixa abaixo. Nesse contexto, implemente a página web descrita em 3 arquivos diferentes, sendo eles:

  • Um arquivo HTML com a estrutura da página;
  • Um arquivo CSS com as definições de estilo da página, para que ela se pareça com a imagem acima;
  • Um arquivo JS com a programação necessária para que o comportamento da págia seja o mesmo exposto no enunciado acima.

Os três arquivos devem estar relacionados entre si. Ou seja, o arquivo HTML deve fazer referência aos outros dois.

Para ajudar, segue a sintaxe de algumas tags HTML e uma função JS:

# A funcao parseInt() transforma uma string em um inteiro:

var x = parseInt("123");
# x -> 123

2. Considere a seguinte página web:

figura exercício

O funcionamento dela é simples. O usuário pode inserir uma frase na caixa de texto (considere que a frase contém apenas letras e espaços). Em seguida, ao clicar em “Contar!” a página exibe a contagem total de caracteres, vogais, consoantes e espaços contidos na frase inserida pelo usuário. Nesse contexto, implemente a página web descrita em 3 arquivos diferentes, sendo eles:

  • Um arquivo HTML com a estrutura da página;
  • Um arquivo CSS com as definições de estilo da página, para que ela se pareça com a imagem acima;
  • Um arquivo JS com a programação necessária para que o comportamento da página seja o mesmo exposto no enunciado acima.

Os três arquivos devem estar relacionados entre si. Ou seja, o arquivo HTML deve fazer referência aos outros dois.

3. Considere a seguinte página web:

figura exercício

O funcionamento dela é simples. O usuário pode inserir uma frase na caixa de texto (considere que a frase contém apenas letras e espaços). Em seguida, ao clicar em “Inverter!” a página exibe a frase inserida pelo usuário ao contrário. Nesse contexto, implemente a página web descrita em 3 arquivos diferentes, sendo eles:

  • Um arquivo HTML com a estrutura da página;
  • Um arquivo CSS com as definições de estilo da página, para que ela se pareça com a imagem acima;
  • Um arquivo JS com a programação necessária para que o comportamento da página seja o mesmo exposto no enunciado acima.

Os três arquivos devem estar relacionados entre si. Ou seja, o arquivo HTML deve fazer referência aos outros dois.

Aula 09 - Frameworks Front-end

Bibliografia recomendada para o tema:

Frameworks

Outros recursos

  • http://shoelace.io

Starter-code

http://gitlab.com/ds122-alexkutzke/ds122-bootstrap-example

Framworks Front-end

Front-end é o termo utilizado para se fazer referência à parte de uma aplicação Web que é executadas na máquina cliente. Ou seja, em geral, envolvem as tecnologias HTML, CSS e Javascript e se tratam, em grande medida, de detalhes da interface dos sistemas Web.

Frameworks front-end são, por sua vez, conjuntos de especificações, arquivos e bibliotecas utilizados para facilitar o desenvolvimento de front-end’s para aplicações Web. Por exemplo, um framework front-end pode ser um conjuto de arquivos CSS e JS que podem ser utilizados em diferentes aplicações Web, desde de que algumas regras para sua utilização sejam seguidas.

Em geral, o uso de um framework front-end envolve os seguintes passos:

  • Carregamento dos arquivos CSS e JS do framework (por CDN ou download);
  • Organização dos arquivos HTML de acordo com as especificações do framework;
  • Utilização de classes CSS e funções JS disponibilizadas pelo framework.

Vários frameworks front-end são disponilizados na internet. O mais famoso deles é conhecido por Bootstrap.

Bootstrap

Bootstrap é o mais famoso framework front-end para desenvolvimento Web. Com ele é possível criar aplicações responsivas e mobile-first.

exemplo bootstrap

Suas principais características são:

  • Facilidade de uso;
  • Responsividade;
  • Abordagem “mobile-first”;
  • Compatibilidade com a maioria dos navegadores modernos.

Para utilizar o Bootstrap, é possível carregar seus arquivos a partir de CDN:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

A partir daí, basta utilizar as classes CSS e as funções JS do Bootstrap nos seus documentos HTML. Por exemplo:

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor..</p>
      <p>Ut enim ad..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor..</p>
      <p>Ut enim ad..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3> 
      <p>Lorem ipsum dolor..</p>
      <p>Ut enim ad..</p>
    </div>
  </div>
</div>

Sistema de grid

Um dos conceitos chave para a disposição de elementos utilizando o bootstrap é sistema de grid. Este sistema considera que toda interface criada com o Bootstrap será dividida virtualmente em 12 colunas de mesma largura. Além disso, qualquer subconjunto dessas colunas podem ser divididas, novamente, em 12 partes iguais.

bootstrap grid system

Esse sistema de grid permite a criação facilitada de colunas em uma interface web. Outro ponto importante é que tal sistema garante que as colunas sejam responsivas, ou seja, se comportem da melhor maneira possível de acordo com o tamanho de tela do dispositivo que acesso o sistema.

Para se utilizar o sistema de grids, basta utilizar as classes do tipo col-TIPO-LARGURA, onde:

  • TIPO:
    • xs: para smartphones;
    • sm: para tablets;
    • md: para desktops;
    • lg: para tv’s e afins;
  • LARGURA
    • Um tamanho de 1 a 12;

A especificação do bootstrap (http://getbootstrap.com/css/#grid) relata que as páginas que utilizam o framework devem ser compostas por blocos (containers) que são divididos em partes horizontais (rows) e que cada uma dessas partes podem ser compostas por diferentes disposições de colunas. A seguir, alguns exemplos de colunas com bootstrap.

<div class="container">
  <div class="row">
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
  </div>
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-6">.col-md-6</div>
  </div>
</div>

exemplo colunas simples

Exemplo de colunas para mais de um tamanhod e dispositivo:

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Para saber mais sobre funcionalidades do Bootstrap, consulte o site oficial do framework. Existem classes para praticamente qualquer tag HTML.

Aula 10 - Programação Back-end

Programação Back-end

Back-end, ou server side, é o termo utilizado para se fazer referência à parte de uma aplicação Web que é executada na máquina servidor. Ou seja, em geral, envolve as operações relacionadas ao processamento/produção/entrega de arquivos HTML de conteúdo dinâmico. Tratam, em grande medida, de detalhes dos dados da aplicação Web. Por essa razão, aparecem, com frequência, atrelados a sistemas de bancos de dados.

Para que uma aplicação Web seja capaz de gerar conteúdo dinâmico, é necessário, no mínimo, o seguinte:

  • Um servidor Web que responda a requisições HTTP;
  • Um programa de computador capaz de produzir conteúdo dinâmico dado uma requisição do cliente;
  • Se necessário, um servço de banco de dados acessado pelo programa citado acima.

Servidores Web

Um servidor web nada mais é do que um programa que “escuta” constantemente por requisições HTTP e as responde na medida em que são recebidas. Em geral, tais servidores “escutam” na porta 80, porém isso é um parâmetro configurável.

Portanto, o serviço de um servidor web é: dada uma requisição no formato HTTP, enviar o recurso solicitado ao cliente em uma resposta também HTTP.

Alguns servidores Web conhecidos são:

Tradução de URL para arquivos locais ao servidor

Ao receber uma requisição, o servidor web procura em seus arquivos locais o recurso a ser enviado como resposta ao cliente. Por exemplo, ao receber uma requisição GET para a url http://example.com/dir1/dir2/arquivoX.html, o servidor irá tentar localizar um arquivo no seguinte caminho dir/dir2/arquivoX.html dentro de seu diretório raiz.

O diretório raiz de um servidor web é um local na máquina que roda o servidor onde estarão todos os recursos disponibilizados por ele. Por exemplo, servidores Apache possuem como diretório rraiz o seguinte caminho: /var/www. Dessa forma, ao receber a requisição GET acima, o servidor apache a responderia enviando o seguinte arquivo local ao cliente: /var/www/dir1/dir2/arquivoX.html.

É importante salientar dois pontos:

  • Por questões claras de segurança, é proibido ao servidor web entregar qualquer recurso que não esteja dentro (ou abaixo) de seu diretório raiz;
  • Os recursos entregues por um servidor web podem ser de QUALQUER tipo. Ou seja, NÃO estão restritos a arquivos HTML, por exemplo. Assim, uma requisição GET para http://example.com/dir1/dir2/arquivoX.pdf é perfeitamente possível.

Páginas dinâmicas

No exemplo anterior, o servidor web entrega ao cliente recursos estáticos. Em outras palavras, apenas envia arquivos na forma em que estão salvos em seu disco local.

Atualmente, aplicações web produzem conteúdo dinâmico. Por exemplo: cada usuário de uma aplicação é capaz de ver apenas seus registros pessoais, ou, em um site de notícias, as manchetes mais importantes variam durante o dia. Tal comportamento não seria possível, ou pelo menos seria muito desgastante, utilizando apenas arquivos estáticos. Por essa razão, servidores web receberam a funcionalidade de entregar conteúdos dinâmicos para suas requisições.

Para que isso ocorra, servidores web precisam trabalhar em conjunto com outros programas capazes de produzir esse contéudo dinâmico. É importante notar que não é tarefa do servidor web criar conteúdo dinâmico. Ele apenas recebe requisições e entrega respostas. Para a produção dinâmica de conteúdo, o servidor web repassa a requisição a um programa de computador que retorna o conteúdo a ser enviado ao cliente.

Pela necessidade de produzir conteúdos dinâmicos para Web, em meados de 1997, servidores Web iniciaram a implementação de um padrão chamada CGI (Common Gateway Interface). Esse padrão especifica como um servidor web pode executar comandos na máquina local para que, então, conteúdos dinâmicos sejam produzidos. Dessa forma, é possível, por exemplo, a partir de uma requisição HTTP, o servidor web executar um programa escrito em linguagem C, o qual produz um HTML como resultado, e enviar este HTML de volta ao cliente. Pode-se realizar esse processo com qualquer programa de qualquer linguagem.

Embora o CGI tenha sido utilizado por muito tempo, hoje ele está sendo substituído por módulos de cada linguagem que rodam diretamente no servidor web. Com isso, ganha-se em desempenho, já que o servidor consegue executar programas “quase que nativamente”.

PHP

O PHP (PHP: Hypertext Preprocessor) é uma linguagem de script de propósito geral, mas que se adequa muito bem às necessidades da programação Web. Além disso, o PHP é de código aberto, o que significa que pode ser utilizada de maneira gratuita. Com essa linguagem de programação é possível gerar arquivos HTMLs dinâmicos.

Ao receber uma requisição HTTP, o servidor web irá procurar pelo recurso solicitado. Se tal recurso for um arquivo PHP, o servidor irá, então, repassar esse arquivo ao interpretador de PHP. Após interpretar o arquivo e executar o código nele inserido, o interpretador irá retornar um arquivo HTML pronto a ser enviado ao cliente.

Em essência, o PHP é um preprocessador de arquivos de texto. A questão é que esses arquivos de texto podem ser arquivos HTML.

Por exemplo, um arquivo PHP simples, index.php, poderia ser o seguinte:

<!DOCTYPE html>
<html>
<body>

<?php
echo "My first PHP script!";
?>

</body>
</html>

Ao passar o arquivo acima ao interpretador PHP, será retornado o seguinte conteúdo:

<!DOCTYPE html>
<html>
<body>

My first PHP script!

</body>
</html>

Preparação do ambiente de desenvolvimento no Linux

Apenas consulte como instalar um servidor web (apache, por exemplo) na sua distribuição. Além disso, não se esqueça de instalar o módulo de PHP para o servidor web.

Em geral, você pode buscar pela sigla LAMP (Linux, Apache, MariaDB e PHP).

Exibição de erros no PHP

Por vezes, para que o PHP exiba mensagens de erro é necessário alterar uma pequena configuração. Basta encontrar o arquivo de configuração do seu php (geralmente está em algum local como: /etc/php5/apache2/php.ini.

Em seguida, procure a opção display_errors e a ative da seguinte maneira:

display_errors = On

Para concluir, reinicie o servidor apache2. Por exemplo:

sudo service apache2 restart

Preparação do ambiente de desenvolvimento no Windows

Existem diversas maneiras para instalar um servidor Web e o PHP no Windows. Porém, a mais simples é utilizar bundles (pacotes) que instalam um conjunto de softwares de uma só vez. Exemplos de bundles são:

  • XAMPP - Apache + MariaDB + PHP + Perl
  • WAMP - Apache + PHP + MySQL;

Aula 11 - PHP

Bibliografia recomendada para o tema:

Starter-code

https://gitlab.com/ds122-alexkutzke/ds122-php-example

Linguagem PHP

Tags PHP

Quando o PHP interpreta um arquivo ele procura pelas tags de abertura e fechamento, , que dizem ao PHP para iniciar ou parar a interpretação do código entre elas. A interpretação dessa maneira, permite o PHP ser incluído em vários tipos de documentos, pois tudo que está fora dessas tags é ignorado pelo interpretador do PHP.

O PHP também permite a tag curta <? (cujo uso é desencorajado pois essa opção está disponível somente quando habilitada na diretiva short_open_tag no arquivo de configuração php.ini, ou quando o PHP tiver sido compilado com a opção --enable-short-tags).

Escapando o HTML

Tudo o que estiver fora das tags PHP é ignorado pelo interpretador, o que permite arquivos PHP de conteúdo misto. Permite que o PHP seja incluído dentro de documentos HTML, para, por exemplo, para a criação de templates.

<p>Isto vai ser ignorado pelo PHP e enviado ao navegador.</p>
<?php echo 'Enquanto isto vai ser interpretado.'; ?>
<p>Isto também vai ser ignorado pelo PHP e enviado ao navegador.</p>

Isso funcionará porque quando o interpretador do PHP encontra ?>, a tag de fechamento, ele simplesmente começa a repassar qualquer coisa que encontre (exceto um fim de linha imediato, ver a seção sobre separação de instruções), até que ele encontre outra tag de abertura a não ser que esteja no meio de uma instrução condicional, onde então o interpretador vai determinar o resultado da condicional e assim decidir qual caminho tomar. Veja no próximo exemplo.

Exemplo 1 Escape avançado usando condições

<?php if ($expression == true): ?>
  Isto irá aparecer se a expressão for verdadeira.
<?php else: ?>
  Senão isso que aparecerá.
<?php endif; ?>

Nesse exemplo o PHP irá escapar os blocos em que a condição não seja satisfeita, mesmo que o trecho de código esteja fora das tags de abertura/fechamento do PHP, pois o interpretador do PHP, irá pular os conteúdos de blocos que não possuem uma condição que não foi satisfeita. Para impressão de grandes blocos de texto, sair do modo de interpretação do PHP é geralmente mais eficiente que enviar todo o texto através das funções echo ou print.

No PHP 5 existem cinco diferentes pares de tags de abertura e fechamento disponíveis, dependendo de como o interpretador estiver configurado. Dois deles, <?php ?> e <script language="php"> </script> estão sempre disponíveis. Também a tag curta de echo <?= ?>, que está sempre disponível desde o PHP 5.4.0.

As outras duas opções são as tags curtas e tags estilo ASP. Assim, embora algumas pessoas achem as tags curtas e ASP convenientes, são menos portáveis, e geralmente não recomendadas.

O PHP 7 removeu o suporte a tags ASP e <script language="php">. Assim, é recomendado utilizar apenas <?php ?> e <?= ?> ao se escrever códigos PHP com maior compatibilidade.

Exemplo 2 Abrindo e Fechando as Tags do PHP

1.  <?php echo 'se você quer servir documentos XHTML ou XML,
                escreva assim'; ?>

2.  Você pode utilizar também a tag curta de echo para <?= 'imprimir isso' ?>.
    Ela sempre está disponível do PHP 5.4.0 em diante, e é equivalente a
    <?php echo 'imprimir isso' ?>.

3.  <? echo 'esse código entre tags curtas somente funcionará '.
            'se short_open_tag estiver habititado'; ?>

4.  <script language="php">
        echo 'alguns editores (como o FrontPage) não
              suportam processar instruções com tags assim';
    </script>
    Esta sintaxe foi removida no PHP 7.0.0.

5.  <% echo 'Você também pode utilizar tags no estilo ASP'; %>
    <%= $variable; %> é um atalho para <% echo $variable; %>
    Essas duas sintaxes também foram removidas no PHP 7.0.0.

Separação de instruções

Como no C ou Perl, o PHP requer que as instruções sejam terminadas com um ponto-e-vírgula ao final de cada comando. A tag de fechamento de um bloco de código PHP automaticamente implica em um ponto-e-vírgula; você não precisa ter um ponto-e-vírgula terminando a última linha de um bloco PHP. A tag de fechamento do bloco irá incluir uma nova linha logo após, se estiver presente.

<?php
    echo 'Isto é um teste';
?>

<?php echo 'Isto é um teste' ?>

<?php echo 'Nós omitimos a última tag de fechamento';

Produção de conteúdo dinâmico

Um dos objetivos centrais da programação Web é produzir conteúdo de páginas de maneira dinâmica. Por vezes, o conteúdo gerado deve ser baseado em estruturas de dados envolvidas na própria lógica de programação da aplicação. Por exemplo, visualização de estruturas como vetores, matrizes, listas, além de dados armazenados em diferentes Bancos de Dados. Por essa razão, é comum a produção de rotinas (funções, classes e métodos) para a produção desse conteúdo. O código a seguir é um exemplo disso. A partir de um vetor de números inteiros, a função cria_lista retorna uma string com os elementos do vetor em um formato de lista não ordenada em HTML.

<?php
  function cria_item_lista($item){
    return("<li>$item</li>");
  }
  function cria_lista($itens){
    $result = "<ul>";
    foreach ($itens as $key => $value) {
      $result .= cria_item_lista($value);
    }
    $result .= "</ul>";
    return($result);
  }
?>

<!DOCTYPE html>
<html>
<head>
  <title>Testes de PHP</title>
</head>
<body>
  <?php
    $itens = array(1, 2, 4, 5, 6);

    echo cria_lista($itens);
  ?>


</body>
</html>

O exemplo acima é bastante simples, mas serve para ilustrar a produção básica de um conteúdo dinâmico baseado em estruturas de dados.

Aula 12 - PHP - SuperGlobals, Formulários, Validação e Includes.

Bibliografia recomendada para o tema:

Código de exemplo

https://gitlab.com/ds122-alexkutzke/ds122-php-forms-example

Arrays SuperGlobals

Ao iniciar um script PHP, o interpretador instancia uma série de Arrays globais, comumente denominados SuperGlobals. Essas variáveis, acessíveis em qualquer parte do código, trazem diferentes informações, desde valores de variáveis globais até informações sobre a requisição sendo respondida pelo servidor WEB. Os Arrays SuperGlobals mais utilizados são os seguintes:

  • $GLOBALS: Variáveis globais do código;
  • $_SERVER: Informações sobre cabeçalhos, caminhos e localização de scripts;
  • $_REQUEST: Reuni dados enviados por formulário;
  • $_POST: Reuni dados enviados através do método POST;
  • $_GET: Reuni dados enviados através do método GET;
  • $_FILES: Controla informações sobre arquivos de Upload;
  • $_ENV: Variáveis de ambiente;
  • $_COOKIE: Cookies enviados para a aplicação;
  • $_SESSION: Informações sobre as sessões abertas.

Para mais informações, consulte https://php.net/manual/pt_BR/reserved.variables.php

Exemplos de uso de Arrays SuperGlobals:

<?php 
$x = 75; 
$y = 25;
 
function addition() { 
    $GLOBALS['z'] = $GLOBALS['x'] + $GLOBALS['y']; 
}
 
addition(); 
echo $z; 
?>

<?php 
echo $_SERVER['PHP_SELF'];
echo "<br>";
echo $_SERVER['SERVER_NAME'];
echo "<br>";
echo $_SERVER['HTTP_HOST'];
echo "<br>";
echo $_SERVER['HTTP_REFERER'];
echo "<br>";
echo $_SERVER['HTTP_USER_AGENT'];
echo "<br>";
echo $_SERVER['SCRIPT_NAME'];
?>

Formulários

A forma mais comum para receber/coletar informações de usuários em uma aplicação web é por meio de formulários. Como visto durante as aulas de HTML, sabemos que, para um formulário funcionar, são necessários, pelo menos, dois atributos: action e method. A seguir temos o exemplos de um formulário simples:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Teste de formulário</title>
  </head>
  <body>
    <form action="form_test.php" method="get">
      <input type="text" name="busca" value=""> 
      <input type="submit">
    </form>
  </body>
</html>

No exemplo acima, o formulário, ao ser submetido, fará uma requisição com o método GET para o recurso chamado form_test.php no mesmo servidor/domínio da página acima. É importante que todos os campos do formulário tenha o atributo name. Caso contrário, os campos sem tal atributo terão seus valores ignorados durante a requisição ao servidor.

Abaixo, um possível exemplo para o recurso form_test.php.

<?php
  $busca = $_GET["busca"];
?>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Teste formulário</title>
  </head>
  <body>
    <?= $busca ?>
  </body>
</html>

O código acima apenas exibe a informação passada pelo usuário através do formulário.

Com PHP, para consultar as informações transmitidas por meio de formulários, em geral, consultamos o array SuperGlobals referente ao método utilizado: $_POST ou $_GET.

Além disso, é bastante comum definirmos no script PHP diferentes ações de acordo com o método de requisição. Para isso, podemos utilizar a informação contida em $_SERVER["REQUEST_METHOD"]:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $name = $_POST['fname'];
    echo $name;
}
?>

Abaixo, um exemplo de formulário que envia os dados para a própria paǵina (atenção ao valor de $_SERVER['PHP_SELF'].

<html>
<body>

<form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
  Name: <input type="text" name="fname">
  <input type="submit">
</form>

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // collect value of input field
    $name = $_POST['fname'];
    if (empty($name)) {
        echo "Name is empty";
    } else {
        echo $name;
    }
}
?>

</body>
</html>

Validação

Validação é o ato de verificar se os dados enviados/recebidos estão de acordo com o esperado. Isso garante que o sistema funcione corretamente e que não sofra com ataques de segurança.

No desenvolvimento Web, a validação pode ocorrer em 2 momentos: no servidor (back-end, após os dados serem recebidos ou no cliente (front-end), antes dos dados serem enviados ao servidor.

Como exemplo de ações de validação, temos:

  • Verificação se campos obrigatórios foram preenchidos;
  • Verificação se os campos foram preenchidos com dados corretos (idade sem letras, nome apenas com letras, data no formato esperado, etc.);
  • Verificação se os dados preenchidos não representam ameaças de segurança ao sistema;
  • Verificação se os dados não irão corromper a integridade do Banco de dados;
  • Entre outros.

Validação Back-end

Validação back-end, ou server-side, é a validação que ocorre no servidor. No nosso caso, tal validação é utilizada com recursos da linguagem PHP. Um exemplo de função simples, para validação de campos de texto pode ser o seguinte:

<?php
function verifica_campo($texto){
  $texto = trim($texto);
  $texto = stripslashes($texto);
  $texto = htmlspecialchars($texto);
  return $texto;
}
?>

Pode-se, ainda, utilizar a função empty para verificar se um campo foi preenchido ou não. Por exemplo:

<?php
if(empty($_POST["nome"])){
  $erro_nome = "Nome é obrigatório.";
  $erro = true;
}
?>

Deve-se tomar muito cuidado para prevenir a integridade dos dados (principalmente antes de salvá-los no Banco da Dados) e ataques de segurança (ver XSS abaixo).

Mais funções para validação com PHP:

Upload de arquivos

Validação Front-end

Validação front-end, ou client-side, é a validação que ocorre ainda no cliente. Ou seja, deve ocorrer antes da requisição HTTP ser executada. Previne que dados incorretos sejam enviados ao servidor e possibilita que uma carga desnecessária de dados seja enviada ao servidor.

Tal validação é, geralmente, realizada com com JavaScript, como abaixo:

$(function(){
  $("#form-test").on("submit",function(){
    nome_input = $("input[name='nome']");

    if(nome_input.val() == "" || nome_input.val() == null)
    {
      $("#erro-nome").html("O nome eh obrigatorio");
      return(false);
    }

    return(true);
  });
});

Atenção deve ser dada aos return's no código acima. O trecho apresentado trata do evento submit do formulário identificado por #form-test. Quando um evento retorna um valor false o processo do evento será interrompido. Ou seja, no caso acima, de uma submissão de formulário, a submissão será interrompida e nenhum dado será enviado ao servidor. Dessa forma, previne-se o envio desnecessário de informações.

Atributos de formulário (ver: maxlenght, min, max e required):

Outros métodos para validação com Javascript:

Cross-site scripting (XSS)

O ambiente Web pode ser considerado um dos mais hostis no que se refere a questões de segurança. Isso ocorre pois, em geral, as aplicações Web estão disponíveis a qualquer computador conectado à internet. Em outras palavras, qualquer pessoa no mundo pode acessar e tentar realizar ataques a qualquer aplicação Web na internet.

Dentre as tentativas de ataque mais comuns está o Cross-site scripting (XSS). Esse tipo de ataque trata de envio de scripts externos para serem executados em uma aplicação Web.

Por exemplo, considere uma aplicação Web que apresenta uma página com o perfil de usuários. Durante o cadastro, os usuários preenchem o formulário com vários dados pessoais, como nomes, idade, email, etc. Agora suponha que em um desses campos, o usuário preenchesse o seguinte:

Nome: José da Silva <script>alert('Site hackeado');</script>

Sem qualquer cuidado de segurança, essa aplicação Web estaria vulnerável ao ataque acima sempre que a página de perfil do usuário acima fosse acessada.

Outro exemplo bastante comum é o uso de SQL Injection, ou injeção de SQL. Esse tipo de ataque, uma forma específica de XSS, consiste no envio de trechos de código (SQL) que exibem informações sensíveis ou que alterem permanentemente os dados do Banco de Dados da aplicação Web. Por exemplo, suponha que em uma aplicação que busca por usuários em um Banco de Dados, o usuário preencha o seguinte:

UserId: 105 OR 1=1

Se, em algum momento, a aplicação utilizar o valor digitado pelo usuário para formular um SELECT, poderíamos ter algo parecido:

SELECT UserId, Name, Password FROM Users WHERE UserId = 105 or 1=1;

O que retornaria os dados de todos os usuários do banco.

Ataques XSS são extremamente comuns na internet. Por essa razão, qualquer aplicação Web deve tomar os cuidados necessários para evitá-los. A ação mais simples é a validação dos dados enviados por usuários.

Includes e Requires

Assim como na linguagem C, é possível incluir arquivos PHP em outros. Dessa forma, podemos organizar o código em módulos específicos. Para realizar tal inclusão, temos acesso às seguintes diretrizes do PHP:

  • include 'foo.php';: inclui o arquivo foo.php. Caso o arquivo não exista, apresenta uma mensagem de warning mas não interrompe a execução do script;
  • include_once 'foo.php';: inclui o arquivo foo.php e garante que, se o arquivo já tenha sido incluído no script anteriormente, ele não seja incluido novamente. Caso o arquivo não exista, apresenta uma mensagem de warning mas não interrompe a execução do script;
  • require 'foo.php';: inclui o arquivo foo.php. Caso o arquivo não exista, apresenta uma mensagem de erro e interrompe a execução do script;
  • require_once 'foo.php';: inclui o arquivo foo.php e garante que, se o arquivo já tenha sido incluído no script anteriormente, ele não seja incluido novamente. Caso o arquivo não exista, apresenta uma mensagem de erro e interrompe a execução do script;
vars.php
<?php

$color = 'green';
$fruit = 'apple';

?>

test.php
<?php

echo "A $color $fruit"; // A

include 'vars.php';

echo "A $color $fruit"; // A green apple

?>

Aulas 13 - PHP - Manipulação de bancos de dados

Bibliografia recomendada para o tema:

Acesso ao MySQL

Para acessar o banco de dados MySQL a partir de um script PHP temos as seguintes opções:

  1. Biblioteca (ou extensão) mysqli no formato procedural;
  2. Biblioteca (ou extensão) mysqli no formato orientado a objetos;
  3. Biblioteca PDO (PHP Data Objects).

Durante a disciplina, utilizaremos a primeira, pois não faz uso de orientação a objetos.

A opção PDO pode ser uma ótima alternativa quando se tem a necessidade de utilizar outros bancos de dados (Postgresql, por exemplo), pois tal biblioteca é capaz de se conectar com 12 bancos diferentes. A biblioteca Mysqli, por sua vez, é capaz de se conecta apenas com o banco de dados MySQL.

Para realizar manipulação de dados do MySQL através da biblioteca Mysqli, faz-se uso das funções providas pela biblioteca. Seguem abaixo links para exemplos das principais funções:

Exemplos Mysqli

Para exemplos de arquivos utilizando o mysqli acesse: https://gitlab.com/ds122-alexkutzke/ds122-php-mysqli-example

Prática (não precisa entregar)

Criar a aplicação My Tasks, disponível no seguinte repositório:

https://gitlab.com/ds122-alexkutzke/ds122-my-tasks-app2

A partir do código inicial, disponível em:

https://gitlab.com/ds122-alexkutzke/ds122-my-tasks-app-starter

Video aula sobre criação da aplicação My Tasks

https://youtu.be/5XLp6uZKEug

Instalação MySQL em sistema UNIX (debian based)

Para instalar o MySQl e a extensão do PHP no ubuntu, basta executar o seguinte comando:

sudo apt-get install mysql-server php8.1-mysql

Para padronização, escolha como senha para o usuário root: web1.

O comando abaixo deve ser executado para tornar a instalação mais segura:

sudo mysql_secure_installation

Aplique a resposta “yes” para todas as questões, exceto para a primeira (alteração da senha de root).

Reinicie o servidor apache2 para os novos dados sejam recarregados.

sudo service apache2 restart

Para testar a instalação, acesso o terminal do mysql a partir do seguinte comando:

sudo mysql -uroot -p

Para que não seja necessário o acesso com o sudo, ou super usuário, repita o comando acima e, no prompt do mysql, digite os seguintes comandos:

ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'SUA NOVA SENHA';
FLUSH PRIVILEGES;

No lugar de SUA NOVA SENHA, insira a senha desejada para acessar o mysql. Sugiro que a senha seja web1.

Aulas 14 - PHP - Cookies, Sessions e Login.

Bibliografia recomendada para o tema:

Cookies no Protocolo HTTP

Do site Wikipedia - Cookie HTTP:

Um cookie é um pequeno pacote de dados enviados de um website para o navegador do usuário quando o usuário visita o site. Cada vez que o usuário visita o site novamente, o navegador envia o cookie de volta para o servidor para notificar atividades prévias do usuário. Os cookies foram designados para ser um mecanismo confiável para que sites se lembrem de informações da atividade do usuário, como senhas gravadas, itens adicionados no carrinho de compras em uma loja online, links que foram clicados anteriormente, entre outros.

Cookies no PHP

A criação de um Cookie por meio da linguagem PHP depende do uso da função setcookie. Essa função recebe, no máximo 7 parâmentros:

setcookie(name, value, expire, path, domain, secure, httponly);

Entretanto, apenas o parâmentro name (nome do Cookie a ser criado) é obrigatório. O segundo parâmetro, value, indica o valor a ser armazenado no cookie. O terceiro, expire, por sua vez, marca a data de validade (em segundos) do cookie. Após tal data, o cookie será excluído pelo navegador.

setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/"); // 86400 = 1 day

Por exemplo, o cookie acima terá uma data de validade de 30 dias a partir do momento de criação.

Para alterar o valor de um cookie, basta executar a mesma função setcookie passando outro valor.

Para acessar os dados de um cookie, é necessário utilizar o array superglobal $_COOKIE. Por exemplo:

<?php
$cookie_name = "user";
$cookie_value = "John Doe";
setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/"); // 86400 = 1 day
?>
<html>
<body>

<?php
if(!isset($_COOKIE[$cookie_name])) {
    echo "Cookie named '" . $cookie_name . "' is not set!";
} else {
    echo "Cookie '" . $cookie_name . "' is set!<br>";
    echo "Value is: " . $_COOKIE[$cookie_name];
}
?>

</body>
</html>

Observação: é importante que a função set_cookie seja chamada antes da tag HTML, pois os dados devem ser adicionados ainda no cabeçalho da resposta HTTP.

Para remover um cookie, simplesmente atribua uma data de validade já expirada:

// set the expiration date to one hour ago
setcookie("user", "", time() - 3600);

Sessões

Sessões são uma forma robusta da linguagem PHP de manter informações armazenadas entre diferentes requisições HTTP de um mesmo usuário.

Sempre que uma sessão PHP é iniciada, o usuário recebe um Cookie com uma chave que o identifica, chamada SessionID. A partir dessa chave, o PHP é capaz de saber qual usuário (computador/navegador) está realizando uma requisição.

Para fazer uso de sessões no PHP é necessário iniciá-las por meio da função session_star(). Essa função deve ser chamada sempre que o uso de sessões for necessário.

Por fim, para armazenar ou ler dados de uma sessão, basta utilizar o array superglobal $_SESSION. Por exemplo:

<?php
session_start();
?>
<!DOCTYPE html>
<html>
<body>

<?php
// Echo session variables that were set on previous page
echo "Favorite color is " . $_SESSION["favcolor"] . ".<br>";
echo "Favorite animal is " . $_SESSION["favanimal"] . ".";
?>

</body>
</html>

Sistema de login com Sessions

https://gitlab.com/ds122-alexkutzke/ds122-login-app

Instruções para submissão de tarefas

Para submeter tarefas e exercícios durante a disciplina de DS122, utilizaremos apenas o gitlab.com. Todas as tarefas serão disponibilizadas pelo professor como repositórios Git nesse serviço. Por exemplo:

https://gitlab.com/ds122-alexkutzke/ds122-prepare-assignment

A submissão será um fork do repositório original da tarefa realizado pelo aluno e armazenado no seu grupo criado (ver abaixo).

Instruções gerais

Para mantermos uma organização das tarefas submetidas, siga os seguintes passos:

  1. Acesse o Gitlab (se for seu primeiro acesso, crie um novo usuário, e lembre de colocar seu nome completo para que o professor possa saber que é você);
  2. Crie um novo grupo com as seguintes características:
  • Nome: ds122-ano-semestre-turno-grr;
    • Por exemplo, em 2025, primeiro semestre, se você é do turno noturno e seu login é grr20249999, o nome do grupo criado deve ser: ds122-2025-1-n-grr20249999.
    • Utilize letras minúsculas;
  • Visibilidade do grupo: Privado;
  1. Vá na tela de membros do grupo e adicione o usuário alexkutzke (o primeiro da lista) com o perfil reporter ao seu novo grupo;
  2. Acesse o repositório da tarefa passado pelo professor;
  3. Faça um fork do repositório e indique ao Gitlab para armazená-lo no grupo criado;
  4. Realize a tarefa utilizando o repositório criado para alterar e salvar arquivos, obedecendo prazo de entrega indicado pelo professor.

O grupo deve ser criado apenas uma vez por aluno e deve conter todos os repositórios das tarefas realizadas durante a disciplina pelo aluno.

Com isso, o professor será capaz encontrar e avaliar com facilidade seus trabalhos.

Comandos para configuração de nome e email para o repositório (faça isso para cada repositório clonado se estiver utilizando os computadores do SEPT):

# Na pasta do repositório clonado, digite:
$ git config user.name "Your name"
$ git config user.email "email@example.com"

Caso esteja utilizando seu próprio computador, execute os seguintes comandos apenas uma vez:

$ git config --global user.name "Seu nome"
$ git config --global user.email seuemail@example.com

Trabalhos e tarefas em grupo

Quando devidamente indicado pelo professor, alguns trabalhos e tarefas poderão ser realizados em grupo. Com isso, apenas um fork deverá ser criado por um membro da equipe. Esse membro será o responsável por adicionar seus colegas como membros do tipo developer ou master ao repositório criado (não ao grupo!).

Tecnologia em Análise e Desenvolvimento de Sistemas

Setor de Educação Profissional e Tecnológica - SEPT

Universidade Federal do Paraná - UFPR

DS122 - Desenvolvimento de Aplicações Web 1

Prof. Alexander Robert Kutzke

Especificação de Trabalho Prático 02/2025

O trabalho prático envolve a criação de uma aplicação WEB completa. Ou seja, que inclua a implementação de front-end, back-end e que possua integração com um banco de dados.

Tema

A aplicação deve implementar um jogo de digitação utilizando Javascript e utilizar PHP para armazenar e exibir quadros de pontuação.

O funcionamento é o seguinte:

  1. O usuário deve se registrar e se autenticar para acessar o sistema;
  2. Uma vez autenticado, o usuário pode jogar partidas de um jogo de digitação;
  3. A cada partida, o usuário acumula pontos, exibidos pelo sistema.
  4. O usuário pode acessar seu histórico de partidas (e pontuação), bem como diferentes quadros de pontuação (pelo menos geral e ligas)

O jogo de digitação a ser implementado é livre, desde que envolva o princípio básico de digitação correta de palavras. Os jogos typing.com e ztype são bons exemplos desse princípio.

O sistema deve disponibilizar a inscrição do usuário em ligas. Ligas são um conjunto de usuários que competem entre si. O usuário pode criar e se cadastrar em ligas. Para o cadastro do usuário em uma liga é necessário uma palavra-chave, definida pelo criador da liga.

A pontuação da liga deve ser exibida de duas formas:

  1. pontuação desde a criação da liga; e
  2. pontuação semanal.

Além da pontuação em suas respectivas ligas, o usuário também pode verificar sua pontuação geral, envolvendo todos os jogadores. Esse quadro também deve apresentar a pontuação desde a criação do sistema e pontuação semanal.

A qualquer momento, o usuário pode acessar um relatório com os dados de todas as partidas jogadas, com suas respectivas pontuações.

Requisitos

A aplicação desenvolvida deve atender os seguintes requisitos:

  • Front-end:

    • Uso de HTML5, CSS3 e JS;
    • Interface amigável; ;
    • Validação de campos de formulário;
    • Implementação do Jogo de digitação completamente em JS;

  • Back-end;

    • Integração com um banco de dados;
    • Sistema de autenticação/autorização de usuário(s) salvo(s) em banco de dados;
    • Validação de campos de formulário e outras informações recebidas.

Ambiente de Desenvolvimento

  • O sistema deve ser desenvolvido utilizando apenas os recursos demonstrados na disciplina DS122 (PHP, Javascript (JQuery), HTML5, CSS3 e algum banco de dados);
    • É permitido o uso de frameworks front-end, como Bootstrap e W3.CSS;
    • Não é permitido o uso de frameworks back-end.

Entrega

Datas de entrega e defesa na UFPR Virtual.

O trabalho pode ser feito em grupos de 2 até 4 alunos.

O código deve ser entregue através da UFPR Virtual, por meio de link para repositório git.

O trabalho deverá ser defendido através de uma demonstração do seu funcionamento e explicação do código. A defesa é realizada apenas para o professor, não para a turma.

Documentação

O repositório deverá conter um arquivo chamado README.md com a descrição do sistema e de seu funcionamento. Deve-se utilizar a sintaxe correta da linguagem Markdown nesse documento (para saber mais, consulte: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet).

Critério para avaliação

Os critérios para avaliação serão os seguintes:

  • Defesa e conhecimento do código [50 pontos]:

  • Funcionalidades e implementação [50 pontos]:

    • Qualidade da interface do usuário [10 ponto];
    • Funcionamento do Jogo de digitação [20 ponto];
    • Funcionamento da aplicação back-end [20 pontos];

Atenção: em nenhuma hipótese serão aceitos trabalhos com qualquer traço de plágio. A identificação de plágio implica em nota zero a todos os integrantes do grupo.

Uso de IA Generativa

O uso de IA Generativa é permitido segundo algumas regras, descritas abaixo, e perante entrega de relatório das interações realizadas.

O repositório com o código do trabalho deverá conter um arquivo chamado AI_USAGE_LOG.md com o seguinte conteúdo:

# Relatório de Uso de Inteligência Artificial Generativa

Este documento registra todas as interações significativas com ferramentas de IA generativa (como Gemini, ChatGPT, Copilot, etc.) durante o desenvolvimento deste projeto. O objetivo é promover o uso ético e transparente da IA como ferramenta de apoio, e não como substituta para a compreensão dos conceitos fundamentais.

## Política de Uso
O uso de IA foi permitido para as seguintes finalidades:
- Geração de ideias e brainstorming de algoritmos.
- Explicação de conceitos complexos.
- Geração de código boilerplate (ex: estrutura de classes, leitura de arquivos).
- Sugestões de refatoração e otimização de código.
- Debugging e identificação de causas de erros.
- Geração de casos de teste.

É proibido submeter código gerado por IA sem compreendê-lo completamente e sem adaptá-lo ao projeto. Todo trecho de código influenciado pela IA deve ser referenciado neste log.

---

## Registro de Interações

*Copie e preencha o template abaixo para cada interação relevante.*

### Interação 1

- **Data:** 20/10/2025
- **Etapa do Projeto:** 1 - Compressão de Arquivos
- **Ferramenta de IA Utilizada:** Gemini Advanced
- **Objetivo da Consulta:** Eu estava com dificuldades para entender como gerenciar o dicionário do algoritmo LZW quando ele atinge o tamanho máximo. Precisava de uma estratégia para lidar com isso.

- **Prompt(s) Utilizado(s):**
  1. "No algoritmo de compressão LZW, o que acontece quando o dicionário atinge o tamanho máximo? Quais são as estratégias mais comuns para lidar com isso?"
  2. "Pode me dar um exemplo em Python de como implementar a estratégia de 'resetar o dicionário' no LZW?"

- **Resumo da Resposta da IA:**
  A IA explicou três estratégias: 1) parar de adicionar novas entradas, 2) resetar o dicionário para o estado inicial, e 3) usar uma política de descarte, como LRU (Least Recently Used), que é mais complexa. A IA forneceu um pseudocódigo para a estratégia de reset, que parecia a mais simples e eficaz para este projeto.

- **Análise e Aplicação:**
  A resposta da IA foi extremamente útil para clarear as opções. Optei por implementar a estratégia de resetar o dicionário. O código fornecido pela IA não foi usado diretamente, pois estava muito simplificado e não se encaixava na minha arquitetura de classes. No entanto, a lógica de verificar o tamanho do dicionário e invocar uma função `reset_dictionary()` foi a base para a minha implementação. Isso me poupou tempo de pesquisa em artigos e livros.

- **Referência no Código:**
  A lógica inspirada por esta interação foi implementada no arquivo `compressor/lzw.py`, especificamente na função `compress()`, por volta da linha 85.

---

### Interação 2

- **Data:** ...
- **Etapa do Projeto:** ...
- **Ferramenta de IA Utilizada:** ...
- **Objetivo da Consulta:** ...
- **Prompt(s) Utilizado(s):** ...
- **Resumo da Resposta da IA:** ...
- **Análise e Aplicação:** ...
- **Referência no Código:** ...

---