Skip to main content dev:Coelho

Programaçao De Scripts - Aula 01

Conceitos de Desenvolvimento Web

Front-end: HTML/CSS/Javascript <- Metade aqui, para trabalharmos o básico Back-end: Node/Typescript <- Foco das aulas estará aqui a partir da segunda metade.

Sobre a disciplina

Objetivo: Desenvolver scripts, automação e solução de probelmas utilizando programação.
Avaliações: 2 provas e 2 trabalhos.

(((P1*0.3) + (T1 * 0.7)/2)+((P2*0.3) + (T2 * 0.7))/2)

Prova e trabalho 1 - HTML, CSS e JS
Prova e trabalho 2 - HTML, CSS, JS, NodeJS e Typescript

Toda aula tem um quiz sobre a aula anterior. Este quiz acontece no início da aula. As duas pessoas mais bem ranqueadas no fim do curso, ganharão pontos na média.

Os intervalos serão das 20h30 às 21h.

HTML - O Esqueleto

  • Estrutura Básica
  • Elementos e Tags
  • Semântica

É onde construímos nossa aplicação. É a base, a marcação de onde estarão cada um dos elementos da página. Toda a internet é formada a partir desta base.

É o chassi, a carcaça de um carro. É o “blueprint”, o guia, o molde estrutural do site.

Via HTML nós também conseguimos implementar a acessibilidade do site.

Visão Geral do HTML5

  • Esquema de nomes para localização de fontes do informação Web (URI);
  • Protocolo de acesso (hoje o HTTP/S)
  • Uma linguagem de hypertexto, para a fácil navegação entre as fontes (HTML)

Estamos, desde 2014, na versão 5 do HTML, mantida pela WHATWG e confiada às diretrizes da W3.org.

Esta nova versão, permite um pleno uso do CSS e do Javascript, isto é, permitindo que eles executem o trabalho da melhor maneira possível. Como se o HTML5 fosse uma super caixa, para armazenar somente as melhores ferramentas dentro dela.

Estrutura básica

html code snippet start

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Exemplo de um documento HTML com metadados completos">
    <meta name="author" content="JrEloy">
    <meta name="keywords" content="HTML, exemplo, olá mundo">
    <title>Titulo: Olá, Mundo!</title>
</head>
<body>
    <h1>Olá, Mundo!</h1>
    <p>Este é um exemplo de um documento HTML com metadados completos.</p>
</body>
</html>

html code snippet end

O HTML é “scriptado”, estrutural. Ele lê do topo ao fim do arquivo, linha por linha. Os blocos que iremos criar precisam ter sentido, é necessária uma semântica simples e legível.

Assim, foram criados elementos de linha e de bloco.

  • Linha: Links, Imagens, Parágrafos… (<a>, <img> e <p>)
  • Blocos: Seções, Cabeçalhos, Rodapés… (<section>, <header> e <footer>)

Dica do professor: Não comece o código pelo código, sempre pelo desgin

  • Pesquisar sobre:
    • Metadata content;
    • Flow content;
    • Sectioning content;
    • Heding content;
    • Phrasing content;
    • Embedded content;
    • Interactive content;

Lembrar sempre de fechar as tags abertas, ou de usar um LSP/linter para acusar erros do seu código.

Observação: O profesor mostrou até o arquivo 14 (Formulários) para exemplificar diversas tags. Olhem no Teams!!

CSS - Cascade Style Sheet

Se temos a carcaça, o CSS é quem fará a estilização. Deixará o site, que por enquanto só teremos a estrutura, bonito para que as pessoas possam ler com mais facilidade o conteúdo.

Javascript

São as funcionalides do site, ou como no carro, as especificações pela qual o carro se diferencia do outro.

NodeJS

É o motor, onde e o porque o carro roda.