FUNDAMENTOS DE DESENVOLVIMENTO DE SOFTWARE

Sumário
TEMA 1 – SOFTWARE, PROGRAMAS E SISTEMAS..............................5

1.1 SOFTWARE E PROGRAMAS.............................................................6

1.2 Software de sistema (básico)...............................................................6

1.3 Software aplicativo...............................................................................8

TEMA 2 – SISTEMA OPERACIONAL........................................................8

2.1 Sistemas tradutores...........................................................................11

TEMA 3 – ALGORITMOS E LINGUAGENS.............................................12

3.1 Algoritmos..........................................................................................12

3.2 Linguagens........................................................................................ 15

TEMA 4 – GLOSSÁRIO DO DESENVOLVEDOR DE SOFTWARE.........18

TEMA 5 – CICLO DE VIDA DE SOFTWARE...........................................23

5.1 Ciclo de vida de software (SDLC) – metodologia tradicional.............24

5.2. Ciclo de vida de software – metodologia ágil....................................26

5.3 XP (eXtreme Programming)...............................................................26

5.4 Scrum.................................................................................................28

AULA 2 -...................................................................................................32

TEMA 1 – CRISE DO SOFTWARE..........................................................32

Bug 1 - Falha na Sonda Mariner 1.......................................................33

Bug 2 – Acelerador médico Therac- 25................................................33

Bug 3 - divisão de números com ponto flutuante no Pentium..............34

TEMA 2 – PROFISSIONAL DE TI............................................................34

Engenheiro de software........................................................................34

Analista de sistema..............................................................................35

Desenvolvedor/ Programador...............................................................35

Gestor de TI......................................................................................... 36

Cientista de Dados...............................................................................37
 Engenheiro da Computação.................................................................37

Administrador /Analista de Redes de Computadores...........................37

Administrador de Banco de Dados.......................................................37

TEMA 3 – PERFIL DO PROFISSIONAL DE TI........................................38

TEMA 4 – IMPORTÂNCIA DO PROFISSIONAL DE TI............................40

4.1 Mercado de TI....................................................................................40

4.2 Empreendedorismo e startups...........................................................42

4.3 A mulher e o mercado de TI...............................................................43

4.4 Tecnologias emergentes....................................................................46

4.4.1 virtualização e conteinerização........................................................46

4.4.2 Computação de borda.....................................................................47

TEMA 5 – MITOS E VERDADES DO DESENVOLVIMENTO DE

SOFTWARE....................................................................................................... 48

Mitos de gerenciamento.......................................................................48

Mitos do Cliente....................................................................................49

Mitos dos profissionais da área............................................................49

TI não é uma área para mulheres........................................................50

Ser bom em matemática......................................................................51

Saber Inglês é imprescindível..............................................................52

Profissionais de TI devem estar em constante aprendizado................52

Aula 3 -.....................................................................................................54

1.1 Trabalho em equipe e boas práticas em reuniões..........................55

1.2 Boas práticas em reuniões.............................................................57

TEMA 2 – FERRAMENTAS COLABORATIVAS DE TRABALHO EM

EQUIPE..............................................................................................................59

2.1 Trello...............................................................................................59

2.2 Jira..................................................................................................60

2.3 Slack...............................................................................................61

2.4 Teams.............................................................................................62
 2.5 Discord...........................................................................................63

2.6 Zoom..............................................................................................64

TEMA 3 – VERSIONAMENTO E REÚSO................................................64

TEMA 4 – REPOSITÓRIOS DE CÓDIGOS.............................................68

• W3Schools...........................................................................................7

TEMA 5 – TESTES DE SOFTWARE, CONTROLE DE QUALIDADE E

DEPLOY...............................................................................................................7

Aula 4 - CONVERSA INICIAL..................................................................13

TEMA 1 – INTERNET HISTÓRIA E INFRAESTRUTURA........................13

1.1 História da internet.............................................................................13

1.2 Infraestrutura de comunicação...........................................................15

TEMA 2 – PRINCIPAIS TECNOLOGIAS PARA A INTERNET.................16

TEMA 3 – PRIMEIRO HTML....................................................................19

Saiba mais............................................................................................20

TEMA 4 – SINTAXE.................................................................................21

4.1 Aninhamento......................................................................................22

4.2 Elemento vazio.................................................................................. 22

TEMA 5 – PRINCIPAIS COMANDOS HTML...........................................23

5.1 Cabeçalhos........................................................................................23

5.2 Parágrafos......................................................................................... 23

5.3 Imagens.............................................................................................23

5.4 Links...................................................................................................24

5.5 Tabelas...............................................................................................24

<th>Mês</th>.........................................................................................25

</tr>.......................................................................................................25

<td>1</td> </tr>.................................................................................25

<td>2</td> </tr>.................................................................................26

</tr>.......................................................................................................26
 5.6 Listas..............................................................................................26

5.7 Formulários.................................................................................... 27

Aula 5 - CONVERSA INICIAL..................................................................27

TEMA 1 – DEFINIÇÃO DO CSS..............................................................28

TEMA 2 – SINTAXE.................................................................................30

TEMA 3 – SELETOR................................................................................31

3.1 Seletor universal................................................................................32

3.2 Seletor por tag................................................................................... 32

3.3 Seletor por classe..............................................................................32

3.4 Seletor por id......................................................................................33

#div1 > p { color:blue;}..................................................................34

#div1 p { color:blue;}......................................................................34

3.6 Seletor por irmão............................................................................34

#par1 + p{color:blue;}......................................................................35

3.7 Seletor por pseudoclasse...............................................................35

TEMA 4 – ORDEM DA CASCATA DE ESTILO.....................................36

4.1 Comando !Important.......................................................................38

4.2 Especificidade dos seletores..........................................................39

TEMA 5 – PRINCIPAIS COMANDOS CSS..........................................39

5.1 Cores..............................................................................................39

5.2 Background-color...........................................................................40

5.3 Background-image.........................................................................41

5.4 Margin............................................................................................ 41

5.5 Padding..........................................................................................42

5.6 Text align........................................................................................42

5.7 Estilização de texto.........................................................................42

Aula 6 – Javascript CONVERSA INICIAL................................................43

TEMA 1 – HISTÓRIA DO JAVASCRIPT...................................................43

 1.1 História do JavaScript........................................................................44

1.2 Para que serve o Javascript...............................................................45

TEMA 2 – CONFIGURAÇÕES.................................................................46

2.1 Tag script............................................................................................46

2.2 Arquivo externo..................................................................................47

2.3 Propriedades especiais......................................................................48

TEMA 3 – SINTAXE.................................................................................48

3.1 Variáveis.............................................................................................49

3.2 Comando if.........................................................................................50

3.3 Comando while..................................................................................52

3.4 Função...............................................................................................52

3.5 Lista................................................................................................... 54

TEMA 4 – PRINCIPAIS COMANDOS......................................................54

TEMA 5 – JSON.......................................................................................55

5.1 XML....................................................................................................57

TEMA 5 – apols........................................................................................57

TEMA 6 –Exercícios aula prática:............................................................72

TEMA 7 – Prova Discursiva – questões pra estudar:.............................105

AULA 1

TEMA 1 – SOFTWARE, PROGRAMAS E SISTEMAS

Com o advento da tecnologia e popularização da internet, os softwares,

programas e sistemas têm sido uma constante em nossa vida. Provavelmente
você utiliza algum tipo de software todo dia. Mas mesmo utilizando, você
saberia definir o que ele é? Saberia diferenciar um software de um programa?
Nesse tópico, veremos diversas definições que o ajudará a entender as
diferenças conceituais entre os termos software, programa e sistema.
1.1 SOFTWARE E PROGRAMAS

A seguir é dada uma definição técnica do que é um software. Observe

que são vários conceitos que se unem na definição dada por Pressman (2001):

• Software consiste em:

• instruções (programas de computador) que, quando executadas,
fornecem características, funções e desempenho desejados;
• estruturas de dados que possibilitam aos programas manipular
informações adequadamente;
• informação descritiva, tanto na forma impressa quanto na virtual,
descrevendo a operação e o uso dos programas.

Simplificando a definição anterior, podemos dizer que um software é um

programa de computador e toda a documentação associada a esse programa.
Mas o que é um programa? Como você definiria um programa de
computador?
Uma definição conhecida e frequentemente utilizada por todos da área de
TI é de que é uma sequência de passos ou instruções definidas por um
algoritmo.
Mas o que é um algoritmo? Aqui você pode assumir que este é como
uma receita de bolo, um tutorial. Posteriormente, em outro tópico, veremos um
conceito mais aprofundado.
Um software tem ainda uma classificação, na realidade, ele pode ser
classificado ou categorizado de várias maneiras. Nesta etapa, utilizaremos uma
adaptação da classificação dada por Marçula (2009):

• Software de sistema (básico):

• sistemas operacionais;
• software utilitário.
• Software aplicativo.

voltar

1.2 Software de sistema (básico)

Software básico consiste em uma coleção de programas para apoiar

outros programas. Realiza as tarefas de gerenciamento necessárias ao seu
funcionamento. Temos nessa categoria os sistemas operacionais e o software
utilitário.
O sistema operacional é o software responsável pelo funcionamento
geral dos sistemas de computação. Sem ele os sistemas de computação
praticamente não funcionariam. Como exemplo de sistemas operacionais
temos Windows, Unix, Linux e MacOS. A seguir são mostrados os ícones do
Windows, Android, ubuntu e MacOS, respectivamente na ordem citada.

Devido à importância, falaremos mais adiante e com mais detalhes sobre

o Sistema Operacional.
Os softwares utilitários ou ferramentas de sistema são os que
acompanham o sistema operacional e o auxiliam nas suas tarefas (por
exemplo, gerenciamento de dispositivos, mídias e programas).
O software utilitário fornece ao usuário ferramentas para organizar os
discos, verificar a disponibilidade de memória e corrigir as falhas de
processamento. Costumamos dizer que são softwares úteis ao sistema
operacional, ou seja, que trabalham em função do sistema operacional.
São exemplos de utilitários: antivírus, compactadores, emuladores,
desfragmentadores, formatadores, backup.

• O antivírus é um programa que detecta e remove o vírus, que é um

programa malicioso.
• Emuladores são softwares que simulam, reproduzem um ambiente
específico, por exemplo, o VmWare que simula um computador.
• Desfragmentadores eliminam a fragmentação de um sistema. O que é a
fragmentação? Pense quando salvamos um arquivo no
computador/smartphone, e em um outro momento editamos, fazemos
algumas modificações naquele arquivo, as modificações não são salvas
ao lado do arquivo original. Pense em um armário com várias gavetas: o
seu arquivo original está na gaveta 1 e a edição desse arquivo está na
gaveta 20; isso ocasiona lentidão na leitura e na gravação. É claro que a
explicação técnica é mais complexa que essa abordada aqui, mas esse
exemplo serve para entender o que é fragmentação. A desfragmentação
ajuda a juntar os arquivos e sua edição próximos uns aos outros.
 • Formatadores e backup: a formatação apaga tudo e reinstala.

voltar

1.3 Software aplicativo

O software aplicativo é também chamado apenas de aplicativo ou mais

popularmente app. Podemos dizer que é um software que realiza algum
trabalho para o usuário, ou seja, são programas que realizam tarefas
específicas. Como exemplo temos as planilhas, o editor de texto, os
navegadores (browsers), o editor de imagem, entre outros.
A figura seguinte ilustra os ícones de vários softwares aplicativos.

TEMA 2 – SISTEMA OPERACIONAL

Um sistema pode ser definido como um conjunto de partes que se

interagem para alcançar um determinado objetivo.
O que diferencia software de um sistema é que este pode ser definido
como um conjunto de softwares que interage para alcançar um determinado
objetivo.
O sistema operacional faz parte da categoria de software básico. Como
visto anteriormente, o software básico é aquele necessário para o
funcionamento do hardware ou de parte dele. Sem dúvida, sendo o software
mais importante, devido às tarefas que desempenha, o sistema operacional é
responsável pela supervisão dos processos executados em um computador. O
sistema operacional gerencia todo o hardware e todo o software do computador
e realiza a “comunicação” entre eles.
Ao se falar em processo, você pode relacionar com um programa em
execução para melhor entendimento. Embora a definição de programa e
processos sejam diferentes, neste momento, podemos fazer essa analogia.
 Quando você abre o gerenciador de tarefas, você consegue ver vários
programas, ou seja, vários processos executando. O sistema operacional vai
ser responsável pela execução/supervisão desses processos. Além dos
softwares, o SO gerencia o hardware, pois ele é responsável pela comunicação
entre o software e o hardware.
A figura seguinte apresenta o gerenciador de tarefas e mostra na aba
Processos todos os processos que estão abertos no computador.
Para abrir o gerenciador de tarefas no seu computador, você pode usar o
atalho do teclado: CTRL + SHIFT + ESC, ou, ainda, digitar gerenciador de
tarefas na barra de pesquisa do Windows. Também, é possível usar CTRL +
ALT +DEL e escolher a opção Gerenciador de Tarefas.

Figura 1 – Print do Gerenciador de Tarefas do Windows

Podemos, ainda, dizer que o sistema operacional é uma camada entre o

aplicativo utilizado pelo usuário e o hardware. Observe a próxima figura, a qual
esquematiza essa representação: a camada de hardware, aqui representada
pelo computador, a placa de vídeo, placa mãe, HD, memórias, CPU e
periféricos. Veja que temos dois exemplos de SO – Windows e Linux – e alguns
aplicativos, como o Chrome, o Firefox e o Word.

Figura 2 – SO como camada intermediária entre usuário e hardware

 Usuário/aplicativo

Sistema operacional

Hardware

Crédito: Iamnee/shutterstock.

O sistema operacional desempenha as seguintes funções:

• facilita o uso do computador pelo usuário, tornando mais simples a

utilização de seus recursos;
• gerencia os recursos do computador; e
• controla a execução de programas pela CPU.

Imagine se você não tivesse um sistema operacional instalado em seu

computador, como faria para utilizá-lo? Se não tiver o SO instalado, você não
conseguiria instalar os aplicativos.
Observe que quando falamos em recursos, queremos dizer todo o
hardware do computador e, consequentemente, o software. O sistema
operacional gerencia todo o hardware, que é a placa de vídeo, placa de rede,
memórias e os softwares instalados no computador. Quando você conecta um
mouse, um headset no seu computador, eles também serão gerenciados pelo
sistema operacional. Este, por sua vez, ainda controla a execução dos
programas pela CPU. A CPU é o processador, é o acrônimo de Central Process
Unit. Todo programa que necessita da utilização da CPU é controlado pelo SO.

voltar
2.1 Sistemas tradutores

Como integrantes do sistema básico, embora não tenham sido citados

anteriormente, temos os sistemas tradutores, que são importantes para
conhecermos, principalmente para quem irá trabalhar com desenvolvimento de
software.
Os sistemas tradutores convertem os programas escritos para um código
em uma linguagem de máquina, mais adequada para manipular bits.
Lembra dos códigos escritos nas linguagens de programação? Para que
o computador entenda esse código, é necessário que ele seja traduzido para
uma linguagem de máquina. Lembre-se de que o computador entende apenas
bits.
A figura a seguir ilustra um tradutor. O código entra e o tradutor o traduz
para uma linguagem de máquina.

Figura 3 – Tradutor

me =
(nota
i(medi nota2
=

pri
(“Aprov
\n”

100000100111111110
100011101010101010

Um programa escrito em linguagem de alto nível tem a necessidade de

ser traduzido para a linguagem de máquina para que o computador possa
executá-lo.
Temos dois tipos de tradutores: os interpretadores e os compiladores.
Então, todo programa escrito em linguagem de alto nível, aqui, quando falamos
em linguagem de alto nível, fazemos referências às linguagens que utilizamos
para desenvolvimento de apps (aplicativos).
Existem, portanto, linguagens interpretadas e compiladas.
A diferença é que nos interpretadores o código é interpretado linha por
linha. Tome como exemplo um intérprete. Pode ser o intérprete de libras, ou
outro qualquer, que, enquanto falamos, ele traduz.
 Já os compiladores traduzem o código todo de uma vez, gerando
um .exe, por exemplo. Como analogia temos a tradução de um livro, em que o
tradutor traduz todo o livro e ao final entrega-o traduzido.

Figura 4 – Interpretador

Figura 5 – Compilador

TEMA 3 – ALGORITMOS E LINGUAGENS

No tópico anterior, abordamos os softwares, programas e sistemas. Aqui,

iremos conhecer um pouco mais sobre os algoritmos e as linguagens de
programação.

3.1 Algoritmos

No tópico anterior, vimos algo dos algoritmos. Foi mencionado que

podem assumir que é algo parecido com a receita de bolo. A seguir,
apresentamos uma definição de algoritmo. Essa definição é bem simples e
sucinta e descreve perfeitamente o que ele é. Tal definição foi dada por
Forbellone (2022, p. 3), em um livro sobre lógica de programação bastante
utilizado como referência:
“Algoritmo é uma sequência de passos que visa atingir um objetivo bem
definido”.
Nessa definição de algoritmo, uma sequência passo a passo visa atingir
um objetivo bem definido. O objetivo aqui é representar mais fielmente o
raciocínio envolvido na lógica de programação. Uma vez concebida uma
solução, pode ser traduzida para qualquer linguagem de programação.
Quem já teve Lógica de programação deve ter percebido que existe um
gap semântico muito grande entre lógica de programação e a lógica do dia a
dia. Se você ainda não teve Lógica de programação, quando tiver irá perceber
esse gap. Quando falamos em semântica na linguagem de programação,
estamos nos referindo ao conteúdo, ao significado.
Vamos ver primeiro um exemplo em português para entendermos sintaxe
e semântica. A sintaxe está relacionada com as regras, premissas, restrições.
De maneira simplificada, as regras que determinam o modo como as palavras
podem combinar-se para formar os enunciados definem a sintaxe. Tomemos
como exemplo a frase:

Fiz prova de FDS na semana passada.

Se escrevêssemos:

FDS passada semana prova fiz.

Ainda assim reconheceríamos as palavras, mas a ordem está estranha!

Semântica está relacionada com o conteúdo, o significado das palavras e
sua representação. Por exemplo, um texto pode estar bem escrito
(sintaticamente correto), mas sem sentido ou conteúdo (sem início, meio ou
fim).
Em linguagem de programação a sintaxe define como a forma ou a
estrutura das expressões, dos comandos ou das unidades de programas
devem ser, ou seja, ela define se um programa está corretamente escrito em
uma determinada linguagem de programação.
voltar
 Por exemplo, a expressão seguinte está sintaticamente incorreta. Só de
olharmos vemos que tem algo estranho. Um parênteses que se abriu e não
fechou, um colchete perdido. Números que faltam.

(2 ] - /

Já a semântica define o significado formal dessas expressões, comandos

ou unidades de programas. Ela define o significado da forma de cada trecho de
código. Os erros de semântica estão relacionados com a lógica de
programação. A próxima expressão está sintaticamente correta na linguagem
Python, mas semanticamente não faz sentido somar um número e um
caractere – na linguagem python, os caracteres são escritos utilizando aspas
duplas (“) ou simples(‘).
a = 2 + "3"

Voltando ao assunto dos algoritmos, veremos, agora, alguns exemplos. A

seguir, é mostrada uma receita de bolo de caneca. O modo de preparo é o
passo a passo de como você deve fazer o bolo. No caso, é o algoritmo para se
fazer um bolo.
Exemplo 1 de algoritmo
Receita de bolo de caneca
Ingredientes
• 2 colheres (sopa) de achocolatado
• 3 colheres (sopa) de farinha de trigo
• 3 colheres (sopa) de açúcar
• ½ colher (chá) de fermento em pó
• 3 colheres (sopa) de Leite
• 2 colheres (sopa) de óleo
• 1 ovo

Crédito: Africa Studio/shutterstock.

Modo de preparo
 Em uma caneca com capacidade superior a 350 ml, misture o
achocolatado, a farinha de trigo, o açúcar e o
fermento em pó. Acrescente o leite, o óleo e o ovo e
misture delicadamente até incorporar.
Coloque a caneca sobre um prato de sobremesa e leve
ao forno micro-ondas por 3 minutos em potência alta.
Sirva a seguir.
Crédito: TownFox/Shutterstock.
O segundo exemplo mostra um algoritmo para calcular a média da nota
de duas provas.
Exemplo 2 de algoritmo

Calcular a média de prova

• Obter as duas notas de provas

• Calcular a média aritmética

• Se a média for igual ou maior que 7, o aluno está aprovado

• Se não, está reprovado

Figura 6 – Print de tela de programa: cálculo de média

3.2 Linguagens

Agora falaremos sobre as linguagens de programação. Você se lembra

do que falamos sobre algoritmos? Depois que um problema é resolvido, ou
melhor, depois que é feito um algoritmo para o problema, o programador passa
esse algoritmo para uma linguagem de programação. O programador é quem
profundamente conhece os detalhes da linguagem de programação que ele vai
desenvolver. Costumamos dizer que depois de feito um algoritmo, este pode
ser implementado em qualquer linguagem de programação.
A seguir, temos uma imagem esquematizando que, após
desenvolvermos os algoritmos, que representam a lógica de programação com
a estrutura de dados, basta implementar para uma linguagem de programação.

Figura 7 – Esquema: algoritmo + Lógica + ED = Linguagem

É preciso lembrar que cada linguagem de programação tem uma sintaxe

específica, com regras gramaticais próprias, como as que temos nas
linguagens naturais. Observe nos próximos exemplos a utilização de comando
para imprimir na tela a frase “olá mundo!”. Cada linguagem tem um comando
próprio para realizar essa tarefa.
Para imprimir uma frase na tela, em linguagem C, podemos fazer:

printf(“Olá Mundo!”);

Em linguagem Java, o comando para imprimir algo na tela seria:

System.out.print(“Olá Mundo!”);
 Em linguagem Python:

print(“Olá Mundo!”)

No quadro seguinte, podemos visualizar o algoritmo do exemplo 2

implementado em três linguagens de programação diferentes.
Algoritmo implementado na linguagem Python:
#Obter as duas notas de provas nota1 =
float(input("Digite a primeira nota: ")) nota2 =
float(input("Digite a segunda nota: "))
#Calcular a média aritmética media
= (nota1 + nota2)/2
#Se a média for igual ou maior que 7, o aluno foi aprovado
if media >= 7: print("Aprovado")
#Se nã o, ele foi reprovado else:
print("Reprovado")

Algoritmo implementado na linguagem Java:

//Obter as duas notas de provas
System.out.println("Digite a primeira nota: ");
float nota1 = teclado.nextFloat();

System.out.println("Digite a segunda nota: ");

float nota2 = teclado.nextFloat();

//Calcular a média aritmética float

media = (nota1 + nota2)/2;

//Se a média for igual ou maior que 7,o aluno foi aprovado,
if (media >= 7)
System.out.println("Aprovado");
//Se não, ele foi reprovado
else
System.out.println("Reprovado");

Algoritmo implementado na linguagem C:

 //Obter as duas notas de provas
printf("Digite a primeira nota: ");
scanf_s("%d", &nota1);

printf("Digite a segunda nota: ");

scanf_s("%d", &nota2);

//Calcular a média aritmética

media = (nota1 + nota2) / 2;
//Se a média for igual ou maior que 7, o aluno foi
aprovado
if (media >= 7)
printf("Aprovado");
//Se não, ele foi reprovado
else
printf("Reprovado");

Já a estrutura de dados diz respeito à forma como estes são

armazenados e organizados na memória. Como estrutura de dados mais
simples temos os vetores, também chamados de arrays ou listas. Cada
linguagem tem formas e comandos específicos para manipular as estruturas de
dados.

TEMA 4 – GLOSSÁRIO DO DESENVOLVEDOR DE SOFTWARE

Toda área tem seu jeito próprio de se comunicar, temos o chamado

jargão. Segundo o dicionário Michaellis, “jargão” é a linguagem própria de um
grupo profissional, sobretudo no nível lexical; gíria profissional.
Na área da Computação, muito mais que em outras áreas, temos as
palavras ou termos que são frequentemente utilizados na área de
desenvolvimento. São termos tão corriqueiramente utilizados pelos
profissionais da área que é necessário conhecê-los para compreender e
conseguir se comunicar com seus pares.
Até há pouco tempo muitas dessas siglas ou jargões eram totalmente
desconhecidas pelas pessoas que não eram da área de TI (Tecnologia da
Informação). Com a popularização da internet, muitas palavras que eram
consideradas como jargão de TI passaram a ser utilizadas por muitas pessoas.
Mas ainda temos alguns acrônimos, palavras ou termos que são utilizados e
compreendidos apenas por quem trabalha na área de desenvolvimento. A
seguir são citados alguns termos utilizados na área, que são importantes para o
profissional de TI conhecer.
voltar

Front-end: esse termo está relacionado com desenvolvimento da parte

gráfica de uma aplicação web.
Back-end: está relacionado ao desenvolvimento no lado do servidor. Ou
seja, a programação que acontece no lado do servidor. Geralmente, o
profissional que trabalha com Back-end tem experiência em versionamento e
controle, deve ter, ainda, a habilidade para gerenciar o ambiente de
hospedagem, levando em consideração a acessibilidade e segurança.
Full-stack: o desenvolvedor full-stack é aquele que trabalha com ambas
as abordagens tanto da parte gráfica, quanto da parte do lado do servidor.
API: a Application Programming Interface (Interface de Programação de
Aplicativos) pode ser definida como um conjunto de rotinas e padrões de
programação que possuem o objetivo de acessar aplicativos de software ou
plataformas baseados na web. A API é uma interface utilizada por um programa
ou aplicação e não por um usuário.
Framework: é um conjunto de código de uma linguagem de
programação específica que auxilia no desenvolvimento de projetos de web ou
de software. Podemos pensar no framework como se fosse uma biblioteca de
códigos com funções já prontas. Na área de TI, também é comumente vista a
definição como arcabouço de código. Exemplo de frameworks são: Vue.js,
Angular, Bootstrap e React frameworks para desenvolvimento front-end. Spring
boot e Laravel: framework para aplicações web back-end.
A seguir temos logotipos do spring, angular, vue.js, react, laravel e
bootstrap, respectivamente.

IDE: é o acrônimo para Integrated Development Environment. O

ambiente de desenvolvimento integrado é um software que integra diversas
funcionalidades para desenvolvimento em uma única interface gráfica. A IDE
auxilia e agiliza o processo de desenvolvimento. São exemplos de IDE:
Pycharm, Eclipse, Apache Netbeans, Visual Studio.

SDK: acrônimo para Software Development Kit, em português: kit de

desenvolvimento de software. Basicamente, um SDK será composto de
compilador, debugger e API. Um SDK pode ser entendido como conjunto de
ferramentas fornecidos por um fabricante para que se desenvolva para uma
plataforma ou sistema específico.
Nativo: um aplicativo nativo é aquele desenvolvido para uma única
plataforma utilizando linguagens e ferramentas específicas para a plataforma
em questão. Por exemplo, para desenvolvimento nativo no Android, fazemos
uso de uma SDK (Android SDK) e uma IDE (Android Studio), utilizando a
linguagem Java e kotlin.

Híbridos: dizer que uma aplicação é híbrida implica falar que sua
implementação utiliza html, css e Javascript. As aplicações híbridas utilizam
frameworks ou ferramentas que permitem uma mesma base de código. A
aplicação híbrida é desenvolvida em uma única linguagem e distribuída para
várias plataformas.
Serviços: na área de desenvolvimento podem ser entendidos como
processos de software. O termo processo de software, nesse caso, não é no
sentido de conjunto de atividades que temos na engenharia de software, mas
em um programa processado pelo SO (Sistema Operacional).
Monolítico: é uma aplicação que roda com um único processo.
Microsserviço: é uma abordagem arquitetônica e organizacional do
desenvolvimento de software na qual o software consiste em pequenos
serviços independentes que se comunicam usando APIs bem definidas. Esses
serviços pertencem a pequenas equipes autossuficientes. Como características
dos microsserviços temos que eles são autônomos e especializados.
 A próxima figura ilustra o conceito de aplicação monolítica e
microsserviços.

Figura 8 – Aplicação monolítica x microsserviços

Crédito: Ashalatha/shutterstock.

SOAP: Service-Oriented Architecture (Or Application) Protocol (protocolo

de arquitetura orientada a serviços). O SOAP utiliza arquivos xml e o protocolo
HTTP como protocolo de transporte.
REST: REpresentational State Transfer, em português: Transferência
Representacional de Estado, é um conjunto de restrições para criação de
webservices. Quando um serviço implementa esse padrão, dizemos que é
Restfull. Restfull utiliza arquivos JSON.
SOAP e REST são APIs e são arquiteturas de webservice. Webservices
são independentes de linguagem. Segundo Ferreira (2021), é correto afirmar
que todo Webservice é uma API, mas nem toda API é um Webservice, porque
tanto o Webservice quanto as APIs realizam a comunicação entre aplicações,
porém a forma como são utilizados é totalmente diferente.
A figura seguinte ilustra a independência dos webservices em relação às
linguagens.

Figura 9 – Independência de webservices em relação a linguagens de

programação
Crédito: Ashalatha/Shutterstock.

Commit: o termo commit ou “comitar” significa enviar alterações de um

determinado trecho do código, ou seja, o envio da criação de uma nova versão
do projeto. Geralmente, quando o desenvolvedor termina uma tarefa, ele gera
um commit. Esse commit possui o código modificado e a explicação do que
esse commit faz naquele código.
Versionamento: consiste em atribuir um número de versão ao estado do
projeto. À medida que o desenvolvedor codifica, ele vai criando versões do
projeto. Tome como exemplo várias pastas que representam versões do seu
projeto: trabalho_FDS_v1, trabalho_FDS_v2.
Snapshot: cópia instantânea em um determinado tempo de um volume.
Git: é um sistema de controle de versão que gerencia as várias versões
no desenvolvimento de um documento. Criado por Linus Torvalds, a justificativa
para a escolha do nome é controversa, sendo que nenhuma delas foi
desmentida pelo autor. GIT, em inglês britânico, é uma gíria para cabeça dura,
também pode ser o acrônimo para "Global Information Tracker" ou, ainda,
"Goddamn idiotic truckload of sh*t" (é um xingamento, não iremos traduzir). O
logo do GIT representa a ramificação para desenvolvimento não linear.
 Github: segundo a própria desenvolvedora, o Github é uma plataforma
de desenvolvedor completa para criar, dimensionar e fornecer software seguro.
O github utiliza o Git como sistema de controle.
Há uma certa confusão entre Git e GitHub para quem começa na área.
Entenda Git como uma ferramenta. Tendo esta, você ainda precisará de um
servidor, que, no caso, é o Github. Embora seja mais conhecido e usado,
também existem outros servidores que prestam suporte para git, como: Gitlab,
Bitbucket, Apache Allura. Os ícones seguintes são, respectivamente, do GitHub,
Gitlab, Bitbucket e Apache Allura.

Debug: o debugging ou debugar significa depurar o programa. Ou seja,

encontrar erros e tentar resolvê-los. Aqui, só lembrando que o termo bug na
área de TI se refere a um erro no programa.

voltar

TEMA 5 – CICLO DE VIDA DE SOFTWARE

O ciclo de vida de um software (do inglês: Software Development Life

Cycle – SDLC), também chamado de modelo de processo, é uma
representação simplificada de um processo de software. Este é como se fosse
um roteiro, uma série de passos previsíveis. Esse processo depende do
software que está sendo desenvolvido. O ciclo de vida de um software indica as
etapas que devem ser cumpridas e a sequência para que o software seja
desenvolvido.
Os modelos de processos trazem ordem ao caos existente na área de
desenvolvimento de software. O engenheiro de software deve adaptar um
modelo de processo às suas necessidades e, então, deve segui-lo. O processo
dá controle, estabilidade e organização ao desenvolvimento de software.
 Segundo Sommerville (2019), quatro atividades são comuns a todos os
processos de software: especificação, desenvolvimento, validação e evolução.
Antes de explicar mais detalhadamente cada fase, para ficar fácil de
entender, podemos fazer uma analogia com a construção de uma casa. Essas
fases genéricas são semelhantes também às fases da construção de uma
moradia; a fase especificação, por exemplo, seria especificar com o contratante
como ele quer que a casa seja. Na fase de desenvolvimento, é realizada a
construção da moradia propriamente dita. Na fase de validação, é garantido
que a casa está sendo construída de acordo com o que o contratante solicitou.
A fase de evolução serve para manter a casa em boas condições, ou seja,
evoluir para atender às necessidades do contratante. É possível incluir: pintura,
troca/retirada/acréscimo de encanamento, troca/retirada/acréscimo de fiação,
conserto de problemas que surgirem após final da construção, construção de
um novo cômodo etc.
Entendido o que cada fase faz na construção da casa, vejamos essa
definição para o desenvolvimento de software.
Na fase de especificação de um software ocorre a definição do problema.
A funcionalidade e as restrições quanto às funções do software são definidas
aqui. Nessa fase, é feita uma reunião com o cliente para levantamento de
requisitos. Existem basicamente dois tipos de requisitos: os funcionais e os não
funcionais. Os primeiros dizem respeito ao que o software deve fazer, ou seja,
quais funções ele deve possuir. Já os não funcionais dizem respeito às
restrições do software.
Na etapa de desenvolvimento de software ocorre a codificação do
software de acordo com as especificações coletadas na fase anterior. Aqui,
também é feita a escolha da linguagem de programação que será utilizada para
implementação do sistema.
Na fase de validação o programa é analisado para garantir que atenda
ao que foi solicitado pelo cliente.
Na fase de evolução o software deve evoluir de acordo com a mudança
nas necessidades do cliente, ou seja, devem ser realizados ajustes caso o
software ou algum módulo necessite de alguma modificação.

voltar
5.1 Ciclo de vida de software (SDLC) – metodologia tradicional
Existem muitos modelos de processo de software. A seguir é mostrado
um modelo clássico conhecido como modelo cascata (waterfall). O modelo é
mostrado em uma perspectiva arquitetural; isso significa que será mostrada sua
estrutura, mas não os detalhes das atividades. Devido à tradicionalidade do
modelo, muitas vezes, ele é referenciado como sendo o próprio SDLC.
Modelo Cascata (Watterfall): mostra as atividades fundamentais do
processo de software distribuídas em fases distintas. Devido à cascata de uma
fase para outra, é definido como modelo cascata ou ainda conhecido como
modelo de ciclo de vida do software (SDLC).
São cinco fases que compõem o modelo cascata: requerimento, projeto,
implementação, verificação e manutenção.
Na etapa de requerimento ocorre o levantamento de requisitos. As metas
e restrições são identificadas com os usuários.
Na etapa de projeto os requisitos identificados na etapa anterior são
mapeados em componentes de hardware e software.
Na etapa de implementação, o projeto de software é implementado em
unidades de programas. Nessa fase ocorre também o teste de unidade, que
envolve a verificação de cada unidade e se cada uma cumpre a sua
especificação.
Na etapa de verificação as unidades de programas são integradas e
testadas como um sistema completo.
Na etapa de manutenção o sistema é instalado e colocado em operação.
Aqui, são corrigidos os erros que não foram descobertos nas fases anteriores.
Novas funcionalidades podem ser identificadas e se há a necessidade da
repetição do ciclo.
A figura a seguir representa o modelo cascata e a descrição sucinta de
suas fases.
Figura 10 – Modelo cascata (Waterfall)
 Requisitos são mapeados
em componentes de
hardware e software
Requerimento

Unidades deprograma são

Projeto
metas e restrições integradas e testadas como
são identificadas um sistema completo
junto aos usuários Implementação

O projeto de software
é implementado em
Verificação
unidades de programa

Manutenção

Sistema é instalado e
colocado em operação

Fonte: Kanashiro, 2022.

O modelo cascata é fácil de gerenciar, pois tem etapas bem definidas e

sem sobreposição. É um modelo que visa à alta qualidade, enfatizando metas e
pontos de revisão. Porém, esse modelo apresenta desvantagens, pois é
improdutivo quanto ao tempo, já que a etapa posterior só pode iniciar depois da
finalização da etapa anterior. A Visão Sequencial também não corresponde ao
mundo real, fornecendo pouca visibilidade do estado do projeto, pois é
demandado muito tempo para a primeira entrega. Existem vários outros
processos de software, porém o Cascata é o mais conhecido e tradicional.

5.2. Ciclo de vida de software – metodologia ágil

A metodologia ágil é uma alternativa para a gestão de projetos

tradicionais.
Em 2001, um grupo de programadores lançou o Manifesto Ágil, pregando
uma metodologia que tem como objetivo satisfazer os clientes entregando com
rapidez e com maior frequência versões do software conforme suas
necessidades. A metodologia ágil entrega as funcionalidades de software mais
rapidamente aos seus clientes. Essa metodologia tem foco no software e não
no projeto ou na documentação. É adequada para aplicações em que os
requisitos mudam rapidamente. Veremos duas abordagens utilizadas na
metodologia Ágil: o extreme Programming e o SCRUM.

voltar

5.3 XP (eXtreme Programming)

A programação extrema introduziu práticas ágeis ao desenvolvimento

tradicional de software. As práticas da XP refletem os princípios do manifesto
ágil. O quadro seguinte descreve as práticas do XP e suas respectivas
descrições.

Quadro 1 – Práticas do XP e suas respectivas descrições

Princípio ou prática
Propriedade coletiva
Integração continua
Planejamento incremental
Representante do ciente
Programação em pares
Refatoração
Projeto(design) simples
Lançamentos pequenos
Ritmo sustentável
Desenvolvimento com
testes a priori(test first)
Fonte: Sommerville, 2018, p. 63.
Descrição
Os pares de desenvolvedores trabalham em todas as áreas do sistema
de modo que se desenvolvem “ilhas de conhecimento”, e todos os
desenvolvedores assumem a responsabilidade por todo o código.
Qualquer um pode mudar qualquer coisa.
Assim que o trabalho em uma tarefa é concluído, ele é integrado ao
sistema completo. Após qualquer integração desse tipo, todos os testes
de unidade no sistema devem passar
Os requisitos são registrados em “cartões de história, e as histórias a
serem incluídas em um lançamento são determinadas de acordo com o
tempo disponível e com sua prioridade relativa. Os desenvolvedores
decompõem essas histórias em tarefas de desenvolvimento.
Um representante do usuário final do sistema (o cliente) deve estar
disponível em tempo integral para o time de programação. Em um
processo como esse o cliente é um membro do time de
desenvolvimento, sendo responsável por levar os requisitos do sistema
ao time, visando sua implementação
Os desenvolvedores trabalham em pares, conferindo o trabalho um do
outro e oferecendo apoio necessário para que o resultado seja sempre
satisfatório
Todos os desenvolvedores devem refatorar o código continuamente
logo que sejam encontradas possíveis melhorias para ele. Isso mantém
o código simples e de fácil manutenção
Deve ser feito o suficiente de projeto(design) para satisfazer os
requisitos atuais e nada mais.
O mínimo conjunto útil de funcionalidade que agregue valor ao negócio
é desenvolvido em primeiro lugar. Os lançamentos do sistema são
frequentes e acrescentam funcionalidade à primeira versão de uma
maneira incremental.
Grandes quantidades de horas extras não são consideradas aceitáveis,
já que o efeito líquido muitas vezes é a diminuição da qualidade do
código e da produtividade no médio prazo
Um framework automatizado de teste de unidade é utilizado para
escrever os testes de um novo pedaço de funcionalidade antes que ela
própria seja implementada.
 A figura seguinte ilustra metaforicamente a metodologia tradicional que
entrega apenas parte do produto versus a metodologia ágil, onde pequenas
versões do projeto são entregues até que se entregue o produto.

Crédito: Henrik Kniberg.

voltar

5.4 Scrum

O manifesto ágil possibilitou o aparecimento de várias metodologias e

frameworks. Um dos mais utilizados é o scrum. E é sobre ele que veremos a
seguir.
O Scrum é um framework estrutural, não é considerado uma
metodologia. Basicamente, uma metodologia diz o que fazer e como fazer. O
Scrum indica uma trajetória, mas não como fazer. Sendo assim, o Scrum é um
arcabouço de informações, um esqueleto.
O Scrum possui três artefatos, cinco eventos, cinco valores e três papéis.
A figura a seguir mostra os respectivos artefatos, eventos, valores e papéis do
Scrum. Vamos ver um pouco mais sobre essa composição do Scrum de acordo
com o seu próprio guia. Alguns termos serão mantidos em inglês, pois são as
terminologias utilizadas na área.

Figura 11 – Componentes do Scrum

 •Product Backlog •Sprint planning •Comprometimento
•Sprint Baclog •Daily Scrum •Coragem
•Increment •Sprint Review •Foco
•Sprint Retrospective •Abertura
•Respeito

Artefatos Eventos Valores

•Scrum master
•Product owner
•Desenvolvedor

Papeis

Fonte: Kanashiro, 2022.

No Scrum, os projetos são divididos em ciclos chamados de Sprints. As

Sprints são a essência, o coração do Scrum. Uma sprint é um time-boxed de
um mês ou menos, durante o qual um “Pronto”, incremento de produto
potencialmente liberável é criado. O time-boxed é a expressão para definir uma
unidade de tempo no Scrum. Cabe, ainda, ressaltar que as Sprints têm
durações consistentes ao longo de todo o desenvolvimento. Uma nova Sprint
só se inicia imediatamente após a conclusão da Sprint anterior. As sprints
podem ser vistas como as iterações que ocorrem ao longo do desenvolvimento
de software.
A próxima figura ilustra a consistência das Sprints.

Figura 12 – Sprints

Crédito: KPDMedia/Shutterstock.

Artefatos: no Scrum representam o trabalho feito para fornecer

transparência ao processo. São projetados para maximizar a transparência das
informações-chave para que todos no time recebam as informações relevantes
e tenham a mesma compreensão do que deve ser feito.
Como colocado anteriormente, o Scrum possui três artefatos: o product
backlog, o sprint backlog e o increment.
 O Product Backlog é uma lista ordenada de tudo que é conhecidamente
necessário para fornecer o produto. É a única origem dos requisitos para
qualquer mudança a ser feita no produto. O product backlog é, então, uma lista
de produtos pendentes.
O Sprint backlog possui os itens do product Backlog selecionados para
a Sprint, com o plano para entregar o incremento do produto e atingir o objetivo
da Sprint. Possui também uma previsão do Time de Desenvolvimento sobre

qual funcionalidade estará no próximo incremento. O Sprint Backlog é um plano

feito por e para desenvolvedores. É uma imagem em tempo real altamente
visível do trabalho que os desenvolvedores planejam realizar durante o Sprint
para atingir o objetivo do Sprint.
O increment (incremento) é a soma de todos os itens do Product
Backlog completados durante a Sprint e o valor dos incrementos de todas as
Sprints anteriores.
Eventos: o Scrum prescreve alguns eventos formais para inspeção e
adaptação:

• Sprint;
• Sprint Planning (Planejamento da Sprint);
• Daily Scrum (Reunião diária);
• Sprint Review (Revisão da Sprint); e
• Sprint Retrospective (Retrospectiva da Sprint).

O Sprint foi explicado previamente. Iniciaremos, então, com a

conceituação do Sprint Planning ou o Planejamento da Sprint. O
Planejamento do Sprint inicia o Sprint, estabelecendo o trabalho a
ser realizado para o Sprint. Esse plano resultante é criado pelo
trabalho colaborativo de todo o Time Scrum. O Product Owner
garante que os participantes estejam preparados para discutir os
itens mais importantes do Product Backlog e como eles são
mapeados para a meta do produto. O Time Scrum também pode
convidar outras pessoas para participar do Sprint Planning para
fornecer conselhos.
O objetivo do Daily Scrum é inspecionar o progresso em direção ao
Sprint Goal e adaptar o Sprint Backlog conforme necessário, ajustando o
próximo trabalho planejado. O Daily Scrum é uma reunião de aproximadamente
15 minutos para os Desenvolvedores do Time Scrum.
A sprint Review (Revisão do Sprint) tem como objetivo inspecionar o
resultado do Sprint e determinar futuras adaptações. O Time Scrum apresenta
os resultados de seu trabalho para as principais partes interessadas e o
progresso em direção ao Objetivo do Produto é discutido.
Sprint Retrospective (Retrospectiva da Sprint) tem como objetivo
planejar maneiras de aumentar a qualidade e a eficácia. O Time Scrum
inspeciona como foi o último Sprint em relação aos indivíduos, interações,
processos, ferramentas e sua Definição de Pronto. Aqui, ainda, é discutido o
que correu bem durante o Sprint, quais problemas foram encontrados e como
esses problemas foram (ou não) resolvidos.
Valores: os cincos valores descritos a seguir sempre foram considerados
como partes do Scrum e adicionados oficialmente em julho de 2016 ao guia do
Scrum.

• Coragem: o time Scrum precisa ter coragem para fazer a coisa certa e
trabalhar em problemas difíceis.
• Foco: todos focam no trabalho da Sprint e nos objetivos do time Scrum.
• Comprometimento: as pessoas se comprometem pessoalmente em
alcançar os objetivos do time scrum.
• Respeito: os membros do time scrum respeitam uns aos outros para
serem pessoas capazes e independentes.
• Abertura: o time scrum e seus stakeholders concordam em estarem
abertos a todo o trabalho e aos desafios com a execução dos trabalhos.

Papéis: a unidade fundamental do Scrum é o time. Um pequeno time, ou

seja, um pequeno grupo de pessoas que trabalham juntas, definidas de time
Scrum. Não existe o conceito de hierarquia no time Scrum, mas cada integrante
do time tem um papel (role). São três papeis: Product Owner, Scrum master e
developers (desenvolvedores).
O Product owner é dono do produto, é o responsável por
maximizar o valor do produto resultante do trabalho do Time de
Desenvolvimento. É a única pessoa responsável por gerenciar o
Backlog do Produto.
 O Scrum master é o responsável por promover e suportar o Scrum
como definido no Guia Scrum. O Scrum Master faz isso ajudando a todos a
entenderem a teoria, as práticas, as regras e os valores do Scrum.
O Time de Desenvolvimento consiste em profissionais que realizam o
trabalho de entregar um incremento potencialmente liberável do produto ao final
de cada Sprint.
A figura a seguir representa o ciclo do Scrum.

Figura 13 – Ciclo do Scrum

Fonte: Scrum.org.

voltar

AULA 2 -

TEMA 1 – CRISE DO SOFTWARE

A Crise do Software é um termo que surgiu em 1965 e refere-se ao

problema do software não acompanhar o desenvolvimento do hardware.
Antes de 1965, não existia qualquer planejamento ou projeto para
desenvolver um software ou formação específica para desenvolvedor ou
engenheiro. Em outras palavras, não existia documentação nenhuma.
Os problemas relacionados ao desenvolvimento de software começaram
a surgir quando a demanda por software começou a subir. O número de
usuários de computador começou a aumentar e, consequentemente, a
demanda por software. Era uma época em que a codificação do software era
entendida apenas por quem o tinha desenvolvido. Imaginem o problema que
era!
Era então necessária uma solução para esse problema ou, como muitos
autores dizem, era necessário colocar ordem ao caos. A formação de
profissionais e o uso de técnicas, métodos e ferramentas para o
desenvolvimento de software minimizou esse problema. No entanto, veremos a
seguir que a crise do software ainda persiste e continuaremos com a
explanação para melhor compreensão do que é a crise do software.
A crise que se iniciou em 1965 se acentua na década seguinte e a
necessidade de solução para os problemas cresce. Nessa época do surgimento
da crise do software, os computadores começam a ficar menores com o
surgimento dos CIs (Circuitos Integrados). A época dos CIs ficou conhecida
como terceira Geração de computadores. A partir da terceira geração,
começouse a miniaturização do hardware. Nessa época, surgem os
computadores de mesa, que ficaram conhecidos como PC (Personal
Computer). Se antes os computadores eram usados apena para fins militares, a
partir desse momento passam a ser adquiridos para fins pessoais.
Com o crescimento da demanda por computador, o que se observa
então é o crescimento da demanda por software, e é por essa razão que
falamos que o software não conseguiu acompanhar a demanda pelo hardware.
Como citado anteriormente, nessa época não existiam profissionais
formados na área de desenvolvimento. O software era então desenvolvido de
maneira informal, não seguindo nenhuma metodologia para o seu
desenvolvimento. A ausência de metodologia, como bem sabemos hoje, causa
erros de sistemas, problemas de cálculos, perdas financeira e perda de tempo,
porque as estimativas de prazo são imprecisas.
Então, é preciso que entendam que a expressão “Crise do software”
surge em 1965 e continua até os dias de hoje. A seguir, veremos alguns dos
bugs mais icônicos da Informática que ilustram bem a crise do software.
O termo Bug se refere a um erro na interpretação de um requisito, na
sintaxe de um código ou ainda pode se referir a uma causa (ainda
desconhecida) da queda de um sistema. O Bug ficou amplamente conhecido no
final da década de 1990, quando se especulava que haveria o “Bug do Milênio”
nos sistemas computacionais quando se mudasse do ano 1999 para o ano
2000. A expressão bug, porém, surgiu muito antes dessa época. Antigamente,
os computadores eram gigantescos, construídos com milhões de válvulas. As
válvulas tinham tamanho de uma lâmpada. Algumas vezes alguns bichos, a
exemplo de mariposa, passavam entre as válvulas e ficavam presos,
ocasionando a queda do Sistema - lembrando que “bug”, em inglês, se refere a
inseto.
A seguir, são apresentados alguns dos bugs mais famosos da história da
engenharia de software.
Bug 1 - Falha na Sonda Mariner 1

Datada de 1962, o bug da sonda Mariner 1 se deve ao fato da fórmula

escrita a lápis ter sido digitada errada no computador de cálculo.
A sonda Mariner era um foguete projetado pela NASA para exploração
do planeta vênus e depois do lançamento observou-se um desvio do curso
preestabelecido. A sonda teve que ser destruída quando se encontrava
sobrevoando o atlântico.
Esse bug tão grotesco ainda é relembrado e até hoje é utilizado como
referência para ilustrar a crise do software.
Bug 2 – Acelerador médico Therac- 25
O therac-25 era uma máquina de radioterapia para tratar tumores
utilizado nos hospitais na década de 80, mais precisamente entre 1985 e 1987.
O caso do Therac é conhecido como o desastre da engenharia. O problema:
devido a uma falha de programação, a máquina emitia 100 vezes mais radiação
do que a requerida. Consequência: cinco pacientes morreram e várias pessoas
sofreram os efeitos de ficarem expostas a um elevado índice de radiação. Esse
caso também é muito utilizado para se ilustrar a crise do software, devido a
erros ridiculamente grotescos, como, por exemplo, falta de revisão/teste do
software, falta de documentação e manual fornecido ao usuário que não
explicava os significados dos códigos de erro que a máquina retornava.
Bug 3 - divisão de números com ponto flutuante no Pentium
Um bug clássico que ocorreu em 1993 com os processadores Pentium
da Intel. O problema foi descoberto por um professor de matemática que
percebeu um erro quando se fazia divisão de números com ponto flutuante.
Esse bug não custou vidas, mas custou milhões de dólares a Intel, pois foi
obrigada a trocar de 3 a 5 milhões de chips, totalizando um prejuízo de mais de
meio bilhão de dólar.
Por exemplo ao executar a divisão daria o seguinte erro:
4195835,0/ 3145727,0 = 1,33374 O
correto seria:
4195835,0/ 3145727,0 = 1,33382

Até aqui, deu para ter um entendimento do que foi a crise do software. O
que ela ocasionou e que foi responsável pelo surgimento da engenharia de
software. No entanto, se engana quem pensa que nos dias atuais estamos
livres dos bugs. Recentemente, em 2022, o banco Nubank teve problemas com
erro de arredondamento de ponto flutuante. O bug foi resolvido rapidamente,
embora causou transtornos para vários usuários que foram impossibilitados de
fazer transação via pix de determinados valores enquanto o bug persistia.

TEMA 2 – PROFISSIONAL DE TI
Aqui, serão abordadas as áreas de atuação de diferentes profissionais
da área de TI.
Engenheiro de software
Os engenheiros de software são os profissionais que aplicam o processo
da engenharia de software. É o profissional formado no curso de engenharia de
software. Recentemente, em 2018, a Engenharia de software foi vinculada ao
CREA. Ressaltamos aqui que a SBC (Sociedade Brasileira de Computação)
não concorda com essa regulamentação, mas este é um assunto que não nos
cabe discutir. Para entender o que o engenheiro de software é, primeiramente
veremos o que ele não é. O engenheiro de software não é um desenvolvedor
que trabalha nas atividades de análise e produção de código, também não tem
a função de analista de sistemas. Embora constantemente tenha a função
confundida com a dessas duas profissões, o papel desempenhado pelo
Engenheiro de software é diferente. Seria como confundir o engenheiro civil
com o pedreiro, ou seja, o engenheiro não coloca a mão na massa. Segundo
Wazlawick (2013):

O engenheiro de software acompanha e avalia o desenvolvimento de

todos os projetos da empresa para verificar se o processo
estabelecido é executado de forma eficiente e efetiva. Caso sejam
necessárias mudanças no processo estabelecido, ele as identifica e
 realiza, garantindo que a equipe adote tais mudanças. Ele reavalia o
processo continuamente. (Wazlawick, 2013. p. 5)

voltar

Analista de sistema

O analista de sistemas é o profissional responsável pela compreensão

do problema, ou seja, é de responsabilidade do analista o levantamento dos
requisitos e da modelagem do sistema utilizando a metodologia escolhida.
Quando se fala de requisitos diz respeito ao que o sistema deve fazer e como
serão feitos. São basicamente dois tipos de requisitos: funcionais e não
funcionais. Os funcionais especificam o que o sistema deve fazer e os não
funcionais definem como serão feitos. Um dos principais fatores para fracassos
em projetos de software é a má especificação dos requisitos, sendo assim, o
analista tem a grande responsabilidade de coletá-los e interpretá-los
corretamente. Os requisitos iniciais serão fornecidos pelo cliente, portanto, é o
analista de sistemas quem irá descobrir o que o cliente precisa e planejar a
solução. O analista precisa ainda conhecer sobre banco dados e linguagens de
programação, porém não necessita de conhecimento profundo na linguagem de
programação.
Desenvolvedor/ Programador

O Programador será o responsável pela implementação da solução a

partir das especificações coletadas pelo analista de sistemas. Esse profissional
é que detém o profundo conhecimento da linguagem de programação e do
ambiente de programação e das bibliotecas. Deve ainda ter conhecimento
sobre teste e depuração. Dentre os programadores, ainda existem aqueles que
se especializam em determinadas áreas. Por exemplo, o desenvolvedor pode
ainda querer atuar no desenvolvimento de aplicativos móveis, ou ainda ir para a
área de desenvolvimento de jogos.
Para esse profissional, são imprescindíveis o raciocínio lógico e a lógica
de programação, importantíssimo e indispensável nessa área, pois sem a
lógica de programação é impossível o domínio das linguagens de programação.
A lógica de programação é o uso correto das leis do pensamento e de
processos de raciocínio e simbolização formais na programação de
computadores.
 Tem-se como objetivo a racionalidade e a produção de soluções
logicamente validas e coerente. Permite ainda resolver com qualidade os
problemas que se desejam programar. Segundo Forbelone, a lógica de
programação é concebida pela mente treinada e é representada pela
linguagem de programação. Atualmente, muitas empresas estão dando muita
mais importância à lógica do que ao domínio de linguagens de programação
específicas, pois sabendo a lógica se aprende qualquer linguagem com
facilidade.
Infelizmente, na prática essa divisão de papeis dos três profissionais
citados não é observada. Apenas grandes empresas podem se dar ao luxo de
contratar um profissional para desempenhar um papel específico. Muitas vezes,
o que vemos na prática é um profissional desempenhando as três funções. No
entanto, é importante que se tenha em mente que, ainda que uma pessoa
execute mais de um papel no processo de desenvolvimento de software, esses
papéis são distintos.
voltar

Gestor de TI
Nem todo profissional da área de TI trabalha com desenvolvimento de
programas de computador. O gestor de TI é um deles. Esse profissional é quem
administra os recursos de TI. Quando falamos em recursos de TI, estamos nos
referindo ao tratamento, armazenamento e proteção de sistemas e
informações. O Gestor de TI ainda é responsável por garantir a segurança dos
dados. Na gestão de TI, além de saber sobre desenvolvimento, também deve
ter conhecimento sobre marketing e administração, pois deve ter competência
para fazer planejamento com ações estratégicas. Deve saber como utilizar as
ferramentas tecnológicas a favor da empresa.
Cientista de Dados

O cientista de dados deve ter conhecimento em computação, matemática

e análise de dados. Ele é o profissional responsável por reunir e interpretar os
dados. O cientista de dados é um Especialista analítico, pois trabalha com a
análise de dados, resolvendo problemas complexos.
Com o surgimento da big data, os cientistas de dados se tornaram
imprescindíveis em muitas empresas. Com capacidade de ler, escrever,
comunicar e raciocinar com dados, diferente do analista de dados que apenas
analisa e comunica as informações, o cientista deve ter conhecimento de
métodos científicos, pois deve formular hipóteses e achar soluções.
Engenheiro da Computação
O engenheiro da computação é um profissional que tem uma base mais
sólida em cálculo. Além de aprender cálculo, tecnicamente aprende tudo o que
se aprende em engenharia de software. O engenheiro de computação está apto
a desenvolver software e hardware. A diferença com o engenheiro de software
é que o engenheiro da computação está mais direcionado a desenvolver
softwares, por exemplo, para microcontroladores e projetos de chips. O
Engenheiro de computação seria uma junção entre cientista da computação e o
engenheiro eletricista.
Administrador /Analista de Redes de Computadores
O foco para quem é formado nessa área de redes são as profissões
como: administrador de redes, analista de suporte, analista em segurança de
redes, supervisor de segurança de redes, entre outros. Esse profissional é
responsável pela Instalação e implementação de infraestrutura de sistemas.
Tem a habilidade de documentar projetos de redes, configurar e gerenciar
redes. É ainda o profissional responsável pelas soluções para desempenho da
rede, garantindo a comunicação segura de programas e equipamentos. Muito
comumente os profissionais dessa área se especializam na parte de web
segurança.
Administrador de Banco de Dados

O profissional dessa área implementa, projeta as soluções e gerencia o

Banco de dados, sendo responsável ainda pela segurança e integridade dos
dados. O profissional dessa área, apesar de não ser um engenheiro de dados,
pode ainda trabalhar na área de engenharia de dados.

voltar
TEMA 3 – PERFIL DO PROFISSIONAL DE TI

Aqui, será abordado o perfil do profissional de TI. Embora o profissional

de TI tenha diferentes papeis, de modo geral, as competências e habilidades
não diferem.
Molinaro (2010) cita três habilidades inerentes ao profissional de TI:
habilidade básica, habilidade técnica e habilidade comportamental. A seguir,
são descritas sucintamente as três habilidades.
Habilidades básicas: diz respeito as habilidades básicas de TI, como
conhecer o sistema operacional, saber utilizar editores e planilhas, saber fazer
uma apresentação no Power point e saber lidar com outros aplicativos
considerados básicos.
Habilidades técnicas: atualmente conhecida como hard skills. As
habilidades técnicas são quantificáveis. Entendemos as habilidades técnicas
aquelas que adquirimos através de estudo formal, como por fazer um curso de
desenvolvimento para aprender as técnicas e ferramentas utilizadas nessa
área. As competências técnicas são o conhecimento fundamental que um
profissional deve ter. O profissional de TI deve ser especialista em alguma área
e generalista nas outras.
Habilidades comportamentais: nos dias atuais, a habilidade
comportamental é mais conhecida como soft skills. São características
subjetivas, difíceis de avaliar e estão também relacionadas ao comportamento
do profissional: como ele interage em grupo, habilidade de resolver problemas,
de trabalhar em equipe, de se comunicar, de planejar - embora sejam
subjetivas, podem ser desenvolvidas pelo profissional. São habilidades que
geralmente são analisadas nas entrevistas de emprego.
Essas habilidades surgem como novas capacidades sociais e
comportamentais (soft skills), que possuem caráter universal. Hoje em dia, é
muito importante desenvolver as soft skills, existindo até profissionais
especializados nessa área, os chamados coaching de carreira.
Com tantas habilidades requeridas, o perfil do profissional de TI é um
tanto quanto complexo, podemos assim dizer, pois o profissional deve ainda
gostar de aprender novas tecnologias e estar sempre atualizado, além de ser
um profissional criativo deve dominar as tecnologias emergentes. Além da
facilidade de aprender e se adaptar rapidamente as novas tecnologias, se for
ainda um desenvolvedor, deve ser capaz de programar em várias linguagens e
para várias plataformas. Quando falamos em diversas plataformas estamos nos
referindo a dispositivos móveis (celular/tablets), computador.
Já deu para notar que o profissional de TI deve estar em constante
aprendizado e atualização, não é?
E não é só isso. Além das habilidades técnicas inerentes à profissão, o
inglês também é indispensável para esta profissão assim como a facilidade de
trabalhar em equipe, pois essa área é muito complexa e o profissional muitas
vezes deve trocar ideias com outros colegas de profissão. O velho perfil do
nerd, de ser um cara isolado em um porão e que trabalha sozinho, já não existe
mais.
Mas o que realmente o mercado busca?
Competência profissional!
A competência profissional abrange o conhecimento, a habilidade e a
atitude. O conhecimento é o saber. A habilidade é o saber fazer. A atitude é o
saber ser. Assim, a intersecção dessas 3 dimensões formam a competência
profissional.

Competência
Conhecimento Profissional

Atitude Habilidade

A seguir, são mostrados exemplos de anúncios reais para vagas de

emprego para profissionais da área. Observe que além das habilidades
técnicas são exigidas também as comportamentais.
 No tópico a seguir, veremos sobre a importância do profissional da área
de TI (Tecnologia da Informação), discutiremos sobre empreendedorismo e
mercado de trabalho na área de TI.

TEMA 4 – IMPORTÂNCIA DO PROFISSIONAL DE TI

A chegada da pandemia acelerou o processo de digitalização de muitas

empresas. Com isso, o mercado de Tecnologia da Informação (TI) ganhou
ainda mais destaque no processo de transformação digital, exigindo a figura de
um profissional imprescindível para a criação de soluções em diferentes áreas
de negócios. Profissionais da área de TI, como desenvolvedores, analistas e
administradores de redes e outras áreas afins tornaram imprescindíveis para
diferentes organizações.

voltar

4.1 Mercado de TI

A área de TI é a que mais cresce atualmente e com o advento da

pandemia da Covid-19 os recursos tecnológicos se mostraram imprescindíveis.
Algumas instituições brasileiras trazem dados importantes acerca da utilização
das tecnologias no país. Segundo dados do Cetic, que é Centro Regional de
Estudos para o Desenvolvimento da Sociedade da Informação, que monitora a
adoção das Tecnologias de Informação e Comunicação (TIC) no Brasil, entre
2019 e 2021 – período marcado pela emergência da pandemia COVID-19 – a
proporção de empresas brasileiras que comercializaram produtos e serviços
online cresceu de 57% para 73% (Cetic, 2021).
Ainda de acordo com os indicadores do Cetic em pesquisa feita sobre a
utilização das TICs pelas empresas no brasil, entre 2013 e 2021 houve um
crescimento de 9% na proporção de empresas que possuem área ou
departamento de TI. O ano de 2013 foi o ano em que houve a primeira edição
sobre proporção de empresas que possuem área ou departamento de TI.
À primeira vista, o crescimento médio em porcentagem de 9% em um
período de pouco menos de uma década pode parecer pouco, mas se
observamos o gráfico podemos perceber que a porcentagem nas empresas de
pequeno porte subiu mais de 16% e na de médio o crescimento foi de 18%.
Nas empresas de grande porte, a porcentagem continuou estável com 89% das
empresas possuindo departamento de TI. Esse aumento nas pequenas e
médias empresas mostra um cenário otimista, pois quer dizer que as pequenas
e médias empresas estão investindo cada vez mais em serviços e produtos da
área de TI.
1
9 8 8
8
7 6
6
5
5
4
4
3 2
2
1
0
Peq Mé Gra
20 20

Pequeno De 10 a 49 pessoas
Médio De 50 a 249 pessoas
Grande Mais De 250 pessoas

Fonte: Brascom.

De acordo com a Brasscom (Associação Brasileira das Empresas de

Tecnologia da Informação e Comunicação) no relatório setorial referente a
2021, a demanda por mão de obra na área de TI considerando de 2021 a 2025
é de 797 mil, com uma média simples de 159 mil empregos por ano.
Hoje, o Brasil forma cerca de 52 mil pessoas com perfil tecnológico por
ano, com relativo descasamento entre oferta e demanda de mão de obra.
Esta é uma grande oportunidade para o os profissionais de TI do país,
especialmente em um momento em que se verifica uma taxa de desemprego
de mais de 11% (considerado 2021). Ainda de acordo com a Brasscom, a
remuneração média do subsetor de Software e serviços de TI é a maior dentre
as pesquisadas e 3,5 vezes superior ao salário médio nacional. O gráfico a
seguir mostra os salários de TIC e Telecom no país.

Fonte: Brasscom 2021 e UT.

No Relatório da Brasscom, a remuneração do setor TIC, do subsetor de

Serviços de alto valor agregado e Software, Telecom e Serviços de Implantação
inclui benefícios comumente oferecidos no setor.

voltar

4.2 Empreendedorismo e startups

Apesar de não ter sido citado como habilidade inerente do profissional de

TI, o espírito empreendedor também é muito bem-vindo aos profissionais dessa
área.
Saber sobre empreendedorismo também é um quesito que não pode ser
deixado de fora. Além de desenvolver os sistemas ou prestar serviços de TI,
muitas vezes o profissional deve saber como divulgar e vender seu
produto/serviço. Ter um espírito empreendedor pode ser o caminho para o
sucesso. Muitas startups começam assim, com uma ideia criativa e espírito
empreendedor.
 A popularização da internet e smartphones também contribui
enormemente para o crescimento do mercado digital no Brasil. No mercado
digital, houve a proliferação de startups brasileiras. Startup é um grupo de
pessoas à procura de um modelo de negócios repetível e escalável,
trabalhando em condições de extrema incerteza. As empresas startups que
atingem mais de 1 bilhão de dólares são chamadas de unicórnio.
As fintechs no Brasil mostraram aumento de 96% ao ano. De acordo com
a Nubank, as fintechs são startups ou empresas que desenvolvem produtos
financeiros totalmente digitais, nas quais o uso da o uso da tecnologia é o
principal diferencial em relação às empresas tradicionais do setor. Algumas das
fintechs mais conhecidas no Brasil: Neon, Stone, Nubank, Getnet, Ebanx,
Contabilizei, C6bank, Vero, Safrapay, Pagseguro, Nibo, Contaazul, Mercado
pago, banco Inter, Geru e Creditas. Essas fintechs utilizam uma abordagem
centrada no consumidor.
O Brasil ingressou no rank dos países com mais unicórnios no mundo,
possuindo 16 deles (considerando até 2021): Stone, Gympass, Nubank, Ifood,
Loggi, Quinto andar, Arco, Pagseguro, 99, WildLife, Creditas, Loft, Vtex, C6
Bank e Madeira Madeira.
A presença de startups está concentrada em São Paulo. Sua economia é
comparável a dos maiores países do mundo.
Por que essas informações são importantes? São relevantes para nós
que somos da área de TI porque nos mostra um cenário que é favorável para o
desenvolvimento. Se, cada vez mais, mais pessoas estão conectadas a
internet, utilizando dispositivos digitais como computadores e principalmente
smartphones, isso indica que as pessoas estão baixando mais apps, e que as
empresas vão precisar de mais desenvolvedores e consequentemente mais
profissionais na área de TI.

4.3 A mulher e o mercado de TI

Essa parte da etapa aborda como é o mercado de trabalho na área de TI

para as mulheres. Primeiramente, veremos algumas mulheres que contribuíram
para o desenvolvimento tecnológico no mundo.
Créditos: HappySloth/Shutterstock.
O primeiro programador da história é na verdade uma programadora.
Seu nome é Ada Lovelace. Ela era uma matemática inglesa e escreveu o
primeiro algoritmo para a máquina analítica de Charles Babbage. A linguagem
de programação Ada foi criada em homenagem a ela pelo Departamento de
Defesa dos Estados Unidos.

Crédito:Smile Ilustras.

Grace Murray Hopper foi analista de dados da marinha americana e criou

a linguagem de programação Flow-Matic, que serviu de base para a criação do
COBOL. É de autoria dela o termo “bug”.

Créditos: patuletail//Shutterstock.

Hedwig Eva Marie Kiesler, mais conhecida como Hedy Lamarr, é a mãe
do wifi. Mais famosa como atriz do que como cientista em sua época, durante a
segunda guerra, ela inventou um aparelho de interferência em rádio, que
posteriormente possibilitou a criação de tecnologias como wifi e CDMA (Code
Division Multiple Access, ou Acesso Múltiplo por Divisão de Código).
Vimos sucintamente (muito sucintamente, eu diria!) sobre essas três
mulheres que em muito contribuíram para o desenvolvimento tecnológico no
mundo. Com base nesses nomes, posteriormente você pode se aprofundar
fazendo pesquisas na internet e conhecendo mais sobre essas mulheres
maravilhosas. A seguir, vemos sobre a presença das mulheres no mercado de
TI. No censo da indústria de jogos digitais realizada pela Abra Games em
2022, constatou-se que na maioria dos casos o desenvolvedor era do sexo
masculino. Apesar de ser um censo da indústria de jogos, esses números
refletem a área de TI. Estima-se que mais de 80% dos profissionais que
trabalham nesta área são homens, ou seja, a participação das mulheres na
área de TI ainda é muito pouco.
No segundo censo, as mulheres que realmente trabalhavam com
programação atingiam apenas 11%, enquanto os homens atingiam 89%.
Apesar de parecer uma porcentagem muito pequena, a presença de mulheres
vem aumentando nos últimos anos. Entre os anos de 2014 e 2018, o aumento
do número de mulheres na área de desenvolvimento de jogos triplicou. Já no
censo feito pela Abra Games em 2022 essa proporção de colaboradoras que
trabalham com programação aumentou para 15%.
Na área de desenvolvimento de software em geral não é diferente.
Segundo pesquisa da Revelo, feita entre janeiro e dezembro de 2021, apenas
12,3% de desenvolvedores são do sexo feminino. Apesar de parecer um
número pequeno, entre 2014 e 2019, houve um aumento significativo de 60%
de mulheres na área de desenvolvimento. Ainda de acordo com a Revelo,
considerando experiência e gênero, a proporção de profissionais de tecnologia,
em sua maioria desenvolvedoras, diminui conforme o aumento da senioridade.
Isso ilustra um cenário positivo, pois quer dizer que cada vez mais as mulheres
mais jovens estão se interessando por essa área de desenvolvimento. No
gráfico a seguir, podemos visualizar com mais clareza esse cenário.

Experiência
Menos de 8,0 1,0

1- 8, % 1,6

3- 8,0% 1,0

7ou mais 91,9 8,1

Hom Mulh

Fonte: Revelo e UT.

Em tempo: Revelo é uma empresa de tecnologia no setor de recursos

que oferece uma plataforma de recrutamento e seleção que conecta candidatos
às vagas de forma ágil e humanizada.
No último tópico, voltaremos a falar sobre as mulheres na área de TI.
4.4 Tecnologias emergentes

4.4.1 virtualização e conteinerização

A computação em nuvem, muitas vezes referenciada como cloud

computing, tem como definição mais básica um computador localizado em
algum lugar acessado via Internet e usado de alguma maneira.
A AWS (Amazon Web Services), provedora de serviços de computação
em nuvem, define, baseada em seus serviços, que a computação em nuvem é
a entrega sob demanda de poder computacional, armazenamento de banco de
dados, aplicativos e outros recursos de TI por meio de uma plataforma de
serviços de nuvem via Internet com definição de preço conforme o uso.
Mas por que falar em computação em nuvem? Tendências que foram
ressaltadas pela pandemia é a da virtualização e conteinerização pois a criação
de um ambiente de desenvolvimento pode ser árdua e demorada. Mais adiante,
discutiremos com mais detalhes a virtualização.
A solução é hospedar códigos e criar, testar e implantar os aplicativos na
nuvem. Isso possibilita disponibilizar softwares com mais rapidez, fazendo
ainda com que o time se torne mais produtivo.
Durante a pandemia de Covid-19, houve um enorme crescimento da
utilização de serviços na nuvem. De acordo com os Dados da Brasscom, em
2020 houve um destaque de crescimento em relação ao ano anterior para
software na Nuvem com 165,8% e infraestrutura na Nuvem com 127,8%. Já no
relatório setorial referente a 2021, o crescimento foi de 32% para software na
nuvem e infraestrutura na nuvem com 42%.
Existem várias empresas que oferecem serviços na nuvem. A AWS
(Amazon Web Services) é uma delas, sendo líder global em serviços de nuvem.
A Amazon Web Services disponibiliza vários serviços de computação em
nuvem para os três modelos de serviço: IaaS (Infraestrutura como Serviço),
PaaS (Plataforma como serviço) e SaaS (Software como Serviço). A AWS
utiliza a prática do dogfooding, ou seja, utiliza seu próprios produtos e serviços,
tendo um foco implacável no cliente.
Como mencionado anteriormente, veremos a seguir as características da
virtualização, para que seja possível compreendermos o que é conteinerização
e computação de borda.
 A virtualização consiste em uma máquina física que emula várias
máquinas virtuais. Cada máquina Virtual roda uma cópia do sistema
operacional, como Windows, Mac OS ou Linux. Ou seja, a virtualização cria um
ambiente virtual de computação (simulando um ambiente real) ao invés de um
ambiente físico. Um exemplo de emulador é o VMWare e VirtualBox. O conceito
de virtualização não é novo, existe desde 1960, mas é uma tendência que foi
ressaltada com a popularização da computação em nuvem.
Os contêineres são um método de virtualização do sistema operacional
que permite executar um aplicativo e suas dependências em processos
isolados de recursos. Simplificadamente os containers empacotam o código, as
configurações e as dependências de um aplicativo em um único objeto. O
Docker é um bom exemplo de produto que utiliza virtualização para entregar
pacotes de softwares denominados contêineres. A seguir, podemos visualizar a
logo do Docker, que representa uma baleia com o dorso empilhado de
contêineres.

4.4.2 Computação de borda

Se procurarmos um pouco na internet, encontraremos várias definições

sobre computação de borda. A seguir, algumas definições dadas por empresas
reconhecidas mundialmente na área de TI.
A definição dada pela Intel é de que “a computação de borda se refere ao
processamento, análise e armazenamento de dados mais próximos de onde
eles são gerados para permitir análises e respostas rápidas, quase em tempo
real”.
Já a IBM define a computação de borda como “um modelo de
computação distribuída que aproxima os aplicativos corporativos das fontes de
dados, como dispositivos de IoT ou servidores de borda local”. Essa
proximidade com os dados em sua fonte pode gerar grandes benefícios de
negócios: insights mais rápidos, tempos de resposta melhores e disponibilidade
de largura de banda aprimorada.
A Hewlett Packard dá uma definição mais simplificada dizendo que “a
computação de borda é uma forma de computação realizada no local ou
próximo a uma fonte de dados em particular, minimizando a necessidade de os
dados serem processados em um data center remoto.”
Analisando as definições, podemos simplificar ainda mais e dizer que a
computação de borda aproxima os equipamentos de onde estão os dados que
são gerados. A computação de borda é uma evolução da computação em
nuvem e teve origem em 1990 com o surgimento das CDNs (Redes de entrega
de conteúdo), que armazena conteúdo próximo dos locais de entrega.
Esse é o recurso utilizado por empresas como Netflix e Disney plus, que
conseguem entregar conteúdo rapidamente e sem “travar”. A computação de
borda é uma tendência que foi ressaltada com o aparecimento do conceito de
IoT (Internet das Coisas). Com a possiblidade de se conectar à internet objetos
que utilizamos no dia a dia, como eletrodomésticos, carros, baba eletrônica
surgiu o conceito de IoT.

voltar

TEMA 5 – MITOS E VERDADES DO DESENVOLVIMENTO DE SOFTWARE

Os mitos do desenvolvimento de softwares são definidos como sendo

crenças comuns, sem fundamento científico sobre o software e o processo
utilizado para criá-lo. De acordo com Pressman (2016), existem os mitos de
gerenciamento, mitos do cliente e mitos dos profissionais da área. A seguir,
veremos essas três categorias de mitos, conforme disposto por Pressman
(2016).

Mitos de gerenciamento

Existem muitos outros mitos na área de gerenciamento. Listamos aqui

alguns mitos relacionados ao gerenciamento de projetos de software.
Mito Realidade
Já temos um livro cheio de padrões e
O livro é utilizado?
procedimentos
Se o cronograma atrasar, Acrescentar mais pessoal atrasa o
acrescentarmos mais programadores projeto
Ao terceirizar o projeto é possível relaxar Acompanhamento contínuo.
Fonte: Kanshiro com base em Pressman (2016).
 Mitos do Cliente

Compreender as necessidades do cliente é um grande desafio em

qualquer projeto. No desenvolvimento de software não é diferente. Muitas
vezes, o cliente tem expectativas de como o software funcionará, muitas vezes
errôneas. Cabe lembrar aqui que, apesar de ser o cliente que deve definir o que
será feito, é o profissional de TI, como especialista da área, que deve saber
convencer o cliente quando achar que uma especificação não cabe em uma
solução de tecnologia. O quadro a seguir mostra os mitos relacionados ao
cliente.
Mito Realidade
A principal causa do fracasso de projetos
Uma definição geral dos objetivos é de software são os requisitos iniciais
suficiente para começar a escrever os maus definidos/entendidos de maneira
programas – podemos preencher os errônea. A probabilidade de sucesso de
detalhes posteriormente. um projeto aumenta se os requisitos
iniciais forem bem definidos
Os requisitos de software mudam
continuamente, mas as mudanças O impacto da mudança depende de
podem ser facilmente assimiladas, pois o quando ela é introduzida.
software é flexível
Fonte: Pressman (2016).

Mitos dos profissionais da área

Apesar de muito estudo, muitos profissionais da área ainda caem em

alguns dos mitos do desenvolvimento de software. Listamos os mitos mais
conhecidos relacionados aos profissionais da área.

Mito Realidade
Uma vez que o programa foi feito e Entre 60 e 80% de todo o esforço será́
colocado em uso, nosso trabalho está́ despendido após a entrega do software
terminado. ao cliente pela primeira vez
Até́ que o programa esteja “em
Existem formas de avaliar a qualidade
execução”, não há como avaliar sua
antes da implementação do sistema.
qualidade
Uma variedade de outros artefatos são
O único produto passível de entrega é o
necessários: modelos, documentos,
programa em funcionamento.
planos etc.
A engenharia de software nos fará criar
Objetivo: criar um produto de qualidade.
documentação volumosa e
Uma qualidade melhor leva à redução do
desnecessária e, invariavelmente, vai
retrabalho.
nos retardar.
Fonte: Pressman (2016).
 Além dos mitos de engenharia de software, temos também aqueles mitos
não técnicos da área de TI. A seguir, são abordados alguns desses mitos.

voltar

TI não é uma área para mulheres

Alguns podem até dizer que TI não é uma área para mulheres, mas a
própria história contradiz isso, e temos exemplos de mulheres como Ada
Lovelace, Hedy Lamarr e Grace Hooper. Mas então por que temos um número
tão baixo de mulheres na área de TI?
Atualmente, estão sendo feitas muitas pesquisas em relação à
predominância de homens, não só na área de TI, mas na STEM (acrónimo em
inglês para "Science, Technology, Engineering and Mathematics"). Em um
estudo feito por DO (2021), são resumidas as questões que influenciam as
escolhas de mulheres jovens ao estudar STEM/TI. Essas questões levantadas
por vários pesquisadores da área de psicologia e comportamento foram
divididas em três níveis: individual, interpessoal e estrutural. No nível individual
são elencadas algumas questões individuais que afetam a motivação e as
decisões das mulheres ao buscar um diploma de TI em nível superior. Dentre
as questões levantadas estão: autoeficácia; atitudes e interesses; exposição
prévia à computação; e percepção de carreira. A seguir, uma breve explicação
de cada quesito que compõe o nivel individual:
Autoeficácia: é a crença na própria capacidade de realizar uma tarefa
ou um objetivo.
Atitudes e interesses: esse quesito faz referência a atitudes em relação
aos computadores e afirma que os interesses das meninas preveem
significativamente sua busca por um diploma de TI
Exposição prévia à computação: meninas com experiência em
computação têm maiores interesses e maior probabilidade de concluir um curso
de TI. Esta relação é explicada pelo argumento de que o acesso precoce a
computadores reduz a intimidação e aumenta a percepção de capacidade. A
familiaridade com computadores estimula também o interesse e a curiosidade
da criança e, simultaneamente, promove seu senso de competência. (Adya, M.;
Kaiser, K.M. 2005. “Early Determinants of Women in the IT Workforce: A Model
of Girls’ Career Choices.” apud Do (2021))
Percepção de carreira: estudos indicaram que trabalhos que envolvem
interações sociais e que valorizam as recompensas sociais têm maior
probabilidade de atrair mulheres do que aquelas que exigem trabalho com
objetos físicos e/ou estão mais focadas em ganhar altos salários e poder. Há
uma percepção errônea de que uma carreira em STEM não é associada a
objetivos comunitários, o que leva as mulheres a se afastarem dessa área
(Dasgupta, N. Stout, J.G. 2014. “Girls and Women in Science, Technology,
Engineering, and Mathematics: STEMing the Tide and Broadening Participation
in STEM Careers.” Policy Insights from the Behavioral and Brain Sciences
1(1):21–29 apud (DO (2021))
Além das questões individuais, também são mostradas questões
interpessoais como influência dos pais e dos pares e modelos femininos
“comuns” a serem seguidos em uma área dominada por homens. A pesquisa
também cita que a presença de mentores, podendo ser um amigo, irmão,
primo, ajuda as alunas a combaterem várias formas de isolamento, micro
agressão e a escassez de modelos de mulheres.
Quanto a questões estruturais levando em consideração o ambiente
acadêmico, infelizmente a literatura aponta vários casos do papel negativo dos
professores escolares no reforço dos estereótipos de gênero em STEM. O
relatório cita ainda que a indústria de games e filmes pode reforçar os
estereótipos de gênero, visto que ainda hoje proliferam a existência de
personagens femininas sexualizadas, o estudo aponta ainda que a
porcentagem de personagens femininas principais não evoluiu ou se
desenvolveu ao longo do tempo.
Embora essas constatações não sejam definitivas, nos levam realmente
a pensar qual é a motivação e as expectativas de uma mulher ao se buscar um
diploma na área de TI.

Ser bom em matemática

Nem toda área de TI exige cálculos avançados. Em um vídeo de

divulgação para incentivar futuros programadores feito pela code.org, onde
vários famosos da área de TI, como Zuckeberg do Facebook, Jack, criador do
Twiter, e Bill Gates, fundador da Microsoft, participam. O próprio Bill diz que
para ser um programador “é preciso apenas saber adição e fração ...” e, é
claro, um pouco de multiplicação também.
E embora tenhamos mitos, algumas coisas são verdades:

Saber Inglês é imprescindível

Um profissional da área de TI que não sabe inglês pode perder muitas

oportunidades. Em um mundo globalizado, onde a tecnologia muda
rapidamente é importantíssimo que se aprenda o básico de inglês, permitindo
assim que se comunique, entenda outros profissionais e saiba pelo menos
entender um manual ou uma especificação em inglês. Mas existem bons
tradutores online! Sem dúvida, mas saber o básico de inglês pode abrir um mar
de oportunidades. Área de TI é uma área em expansão

Como vimos anteriormente, a demanda por profissionais de TI só

aumenta. Essa área é uma que não sofreu crise por conta da pandemia, ao
contrário, esses profissionais ficaram ainda mais disputados.

voltar

Profissionais de TI devem estar em constante aprendizado

Se vai trabalhar na área de TI, deve ter em mente que vai ter que estudar
durante a vida toda, pois a tecnologia muda rapidamente. De um ano para outro
as tecnologias são aprimoradas, enquanto outras novas surgem. As versões de
linguagens e softwares existentes mudam continuamente. Constantemente
quando acha que dominou uma linguagem ou framework, determinado
comando fica “deprecated” – obsoleto - e (re)começa a saga para se adaptar ao
“novo jeito” de fazer.

Material Complementar
Engenharia de Software e Qualidade
 A engenharia de software é importante porque nos capacita para o
desenvolvimento de sistemas complexos dentro do prazo e com alta qualidade
Neste contexto, é clara a importância fundamental da Engenharia de
Software, uma vez que, se o processo de desenvolvimento de sistemas envolve
diversas atividades distintas e a Engenharia de Software é a disciplina que
preocupa-se em estudar e monitorar o bom andamento de todas essas
atividades e a integração entre elas, é trivial notar que é baseado na
Engenharia de Software o sucesso de um projeto no que tange a sua
organização.
Mas o que é um software de qualidade?
 Software de qualidade é aquele que atende todos os requisitos, ele
desempenha todas as funções para o qual foi desenvolvido. Existem vários
fatores de qualidade de software, alguns deles são citados a seguir.
Facil de manter: manutenibilidade – é fácil fazer modificações e
correções
Desempenho: quando a gente fala em desempenho em computação,
estamos nos referindo a tempo
Confiável: confiabilidade, envolve tolerância a falhas, o sistema é capaz
de se recuperar após uma falha?
Fácil de usar - usabilidade

voltar

Aula 3 -

TEMA 1 – COMO NASCE UM SOFTWARE?

Muito antes de se começar a codificar um software, um levantamento de

requisitos é realizado para coletar as funções requeridas no software. Após essa
fase de análise e levantamento de requisitos, é hora de colocar a mão na
massa.
A rotina para o desenvolvimento de software basicamente consiste em
baixar o código de um repositório, codificar, validar e integrar os novos códigos
criados e testar as novas funcionalidades.
Quando baixamos um código do repositório, estamos adquirindo o
código. E não fazemos isso apenas uma vez ao longo do projeto. Adquirimos
uma nova versão do código várias vezes ao longo de um projeto. Cada vez que
é necessária alguma atualização na codificação, é preciso também a
atualização da versão no repositório. Para isso é que se utiliza os sistemas de
controle de versão que falaremos com mais detalhes ao longo desse conteúdo.
Detalhes como colocar nomes adequados ao repositório, além de ajudar mais
rapidamente na sua localização, é uma boa prática que deve ser seguida.
Após baixar o código do repositório, vem a fase da codificação. Más
práticas de programação, como código duplicado e manipulações
desnecessárias no Banco de Dados, podem afetar o desempenho de um
programa. Na fase de codificação devem ainda ser observados critérios básicos
como formatação e nomenclatura no código.
A validação do código desenvolvido não é uma fase realizada por teste
de software, mas, sim, testes realizados pelo programador em seu próprio
código para verificar se tudo funciona de acordo com o que foi especificado.
Essa validação é necessária para que o código seja integrado ao projeto sem
erros. As boas práticas a serem aplicadas aqui englobam a programação em
pares e a consulta aos casos de uso relacionados às funcionalidades
implementadas.
Após a revisão do código ele é integrado ao restante do projeto por meio
de sistemas de controle de versão.
Apesar de estar colocado por último, os testes de softwares não
necessariamente devem ser feitos apenas no final do projeto. Como boas
práticas na fase de testes de softwares estão a automatização de testes, o
desenvolvimento orientado a testes e a realização das atividades de testes
durante a codificação.

voltar

1.1 Trabalho em equipe e boas práticas em reuniões

Vimos anteriormente o ciclo de vida de um software. Vimos como um
software nasce, vive e morre. O ciclo de vida é importante para o planejamento
da construção de um software. Mas são as pessoas que fazem um software. A
Metodologia Ágil dá importância às pessoas. Vamos retornar ao Scrum e
verificar: um time é formado pelo Product Owner, Scrum Master e
Desenvolvedores. No Scrum as reuniões diárias, conhecidas como dailys,
consistem em uma pequena reunião de não mais que 15 minutos para que cada
membro da equipe possa atualizar todos os outros sobre o que estão
trabalhando naquele dia. O objetivo das dailys é priorizar tarefas e a
comunicação com a equipe, tendo como foco o cliente.
Mesmo que não seja utilizada a metodologia Scrum, as equipes ainda
assim são formadas por pessoas. O trabalho em equipe e a colaboração
impacta no sucesso de uma aplicação. Uma equipe que não colabora, que não
sabe em quê o outro parceiro está trabalhando, uma equipe cansada não rende!
 Reuniões é uma boa estratégia para saber em que cada um do time está
trabalhando e quais tarefas são prioridades. Mas, como mencionado
anteriormente, um time cansado não rende. O excesso de reuniões pode
atrapalhar a produtividade. Temos então que dar ênfase nas boas práticas em
reuniões. As reuniões precisam ser produtivas.
Segundo artigo do Harvard Business Review (Rogelberg, 2019), cerca
de 90% das pessoas afirmam sonhar acordado em reuniões e 73% admitem
que usam o horário da reunião para fazer outro trabalho.
O que fazer, então? Eliminar as reuniões, uma vez que não são
produtivas?
Não! O objetivo não deve ser eliminar todas as reuniões, somente
àquelas que são desnecessárias e melhorar a qualidade daquelas que
permanecem. O Ministério Público do Rio de Janeiro (MPRJ), por meio de seu
Laboratório de Inovação (INOVA), realizou uma pesquisa com seus integrantes
e obteve as seguintes conclusões:

• 82,3% dos entrevistados consideram uma mudança importante a escolha

criteriosa de temas;
• 91,6% dos entrevistados consideram uma mudança importante o envio
prévio da pauta;
• 89,4% dos entrevistados consideram uma mudança importante a
definição de quem faz o quê;
• 85,8% consideram como uma mudança importante a limitação do tempo
total de reunião;
• 68,1% consideram como uma mudança importante a limitação de
participantes.

Os números levantados pelo MPRJ nos traz reflexões importantes. Quem

nunca participou de uma reunião e concluiu que as questões levantadas na
reunião poderiam ser resolvidas de outra maneira, como, por exemplo, em um
comunicado por email? Quem já participou de uma reunião que dura horas e
saiu sem entender qual era a finalidade do encontro?
O envio prévio da pauta poderia evitar situações como essa. As
definições de quem faz o quê em uma reunião também é importante, pois todos
devem sair cientes de seus compromissos. Isso pode começar antes da
reunião, definindo, por exemplo, quem será responsável pela ata, quem será
responsável por atribuir as notas e as responsabilidades de cada integrante. Ao
final da reunião, será que cada integrante ficou ciente do que deve ser feito e
quem fará?
Quem já participou de uma reunião e achou uma perda de tempo? Que
os assuntos tratados não têm relação com sua função ou que a sua expertise
não tem relação com nenhuma pauta da reunião? Limitar participantes seria
uma ótima opção para aumentar a eficácia de uma reunião. Convidar
participantes e deixarem que decidam se a pauta tem relevância com a sua
atividade ou expertise seria uma opção. As pessoas não deveriam se sentir
obrigadas ou constrangidas de não aceitar um convite de participação se ela
não tem nada a agregar naquelas pautas propostas em reunião.

1.2 Boas práticas em reuniões

A seguir veremos algumas boas práticas em reuniões. Consideraremos
especialmente as reuniões por web conferência, visto que é uma tendência. A
Zendesk, empresa de software com origem na Dinamarca, famosa por sua
plataforma para o serviço de atendimento ao cliente hospedada na nuvem,
elenca alguns fatores para reuniões eficientes, começando com a condução da
reunião.
Para como conduzir uma reunião, são elencados os seguintes
fatores:

• Não se atrase para a reunião;

• Quem faz o convite deve guiar a reunião;
• Prepare-se para a reunião;
• Apresente todos os participantes;
• Estabeleça as regras da reunião;
• Seja direto e objetivo;
• Pergunte como as pessoas estão se sentindo.

Para que as reuniões sejam mais eficientes, os seguintes fatores são

elencados:

• Verifique se o assunto de fato pede uma reunião;

• Marque reuniões mais curtas;
• Evite encontros fora do horário comercial e tente não remarcar;
• Envie o convite já com um contexto do que será abordado;
• Convide apenas as pessoas realmente necessárias para o encontro;
• Esteja presente e evite distrações;
 • Tenha sempre cuidado com a câmera e o microfone;
• Faça uma ata da reunião remota.

As videoconferências ou webconferências se tornaram populares devido

ao isolamento social imposto pela pandemia da covid-19 e é outra tendência. A
webconferência traz vantagens como custo e tempo. Economia de tempo,
devido a logística, ou seja, não é necessário o deslocamento para o local físico
das reuniões; e economia de dinheiro, pois sem o deslocamento não é
necessário gastos com transporte ou locação física de uma sala de reuniões.
Apesar das vantagens, também existem algumas desvantagens.
Recentemente surgiu o termo Zoom Fadigue ou fadiga do zoom que
relaciona a fadiga causada pelo excesso de videoconferências. O Zoom é uma
das ferramentas mais conhecidas de videoconferência, apesar da fadiga levar o
seu nome, a síndrome é referente a utilização de qualquer ferramenta de
webconferência. De acordo com Riedl (2022) são características da fadiga do
Zoom:

• Termo que se refere aos aspectos negativos da videoconferência em

geral;
• Uso prolongado e repetido de ferramentas de videoconferência;
• Exaustão física e mental;
• Cansaço, preocupação, ansiedade, esgotamento, desconforto e
estresse.

De acordo com estudos da Stanford (Ramachandran, 2021), são causas

do Zoom Fadigue:

• Excesso de contato visual: nas videoconferências todo mundo olha

para todo mundo ao mesmo tempo. Outra fonte de estresse é que os
rostos podem parecer grandes demais dependendo da resolução do
monitor.
• Muito tempo vendo a si mesmo: nas webconferências vemos nós
mesmos enquanto estamos falando. Isso pode causar estresse e
desconforto.
• Redução de mobilidade: estudos apontam que quando a pessoa se
move, ela tem melhor desempenho cognitivo. Quando falamos em
cognitivo fazemos relação com o processo mental de percepção,
memória e raciocínio.
 • Videochamadas demandam maior carga cognitiva: cara a cara a
comunicação não verbal é bastante natural, mas nos chats de vídeo
trabalhamos mais para enviar e receber sinais.

Por ser ainda uma síndrome recente, vários estudos ainda estão sendo
conduzidos, mas alguns especialistas e pesquisadores dessa fadiga colocam
algumas atitudes simples que podem minimizar o efeito da fadiga, como, por
exemplo, desabilitar sua própria vista nos aplicativos de videoconferência para
que não fique se vendo o tempo todo e desligar a câmera por alguns minutos
para que possa se movimentar um pouco.

voltar

TEMA 2 – FERRAMENTAS COLABORATIVAS DE TRABALHO EM EQUIPE

As ferramentas de colaboração são softwares ou plataformas que

permitem o compartilhamento de arquivos e a efetiva comunicação entre os
integrantes de um mesmo projeto.
Mesmo antes da pandemia da covid, na área de desenvolvimento de
software sempre houve a necessidade de utilização de ferramentas
colaborativas. Porém, mais do que nunca é necessário a colaboração e
comunicação entre os integrantes de um mesmo time. O termo ferramentas
colaborativas é relativamente novo.
O Trello e Jira são dois exemplos de ferramentas colaborativas utilizadas
pelas empresas.

2.1 Trello
De acordo com o próprio fabricante, Trello é uma ferramenta visual que
possibilita ao time o gerenciamento de qualquer tipo de projeto, fluxo de
trabalho ou monitoramento de tarefas.
Até um tempo atrás, o Trello era denominado como ferramenta de gestão
on-line para métodos ágeis, auxiliando na organização de tarefas.
Trello tem uma versão gratuita com recursos limitados, standard,
premium e enterprise, sendo a última a versão mais completa e cara.
A figura a seguir ilustra uma tela do Trello. O Trello trabalha com conceito
de quadros, listas e cartões, permitindo que se gerencie tarefas com facilidade.
Os cartões mantêm todas as informações de um time organizadas e em um só
lugar. O Trello permite que sejam adicionados membros, datas de entrega,
deixe comentários e outras funções, tendo como slogan “É mais do que
trabalho. É a maneira de trabalhar juntos”.
A figura abaixo mostra como é o ambiente do Trello. Figura

1 – Trello

Fonte: Trello, 2022

2.2 Jira

É uma ferramenta para gestão de projetos. O Jira é um painel Scrum

personalizado para o próximo sprint, exclusivo para desenvolvimento ágil, sendo
mais indicado para empresas grandes.
A princípio, Jira foi desenvolvido como um rastreador de bugs e itens.
Hoje, é uma ferramenta de gerenciamento para todos os tipos de casos de uso,
desde gerenciamento de casos de teste e requisitos, até desenvolvimento ágil
de software.

Figura 2 – A ferramenta número 1 de desenvolvimento de software usada

por equipes ágeis

Fonte: Jira, 2022.

Jira possui algumas diferenças em relação ao Trello. Enquanto o Jira é

indicado para colaboração entre os integrantes do time, o Trello pode ser visto
como um painel flexível e visual para trocar ideias sobre novos produtos.
 Trello e Jira são praticamente da mesma empresa. O Jira foi criado
primeiro pela empresa australiana Atlassian. Posteriormente, uma subsidiária da
Atlassian criou o Trello. O Trello é uma aplicação na nuvem, enquanto o Jira
deve ser instalado. O quadro abaixo traz uma comparação entre as duas
ferramentas.

Quadro 1 – Comparação entre Trello e Jira

Trello Jira
Planeje e acompanhe o trabalho das equipes que
desenvolvem, executam e dão suporte ao software
Execute seu sprint de desenvolvimento de software de ponta
a ponta com fluxos de trabalho Scrum e Kanban e relatórios
que ajudam você a obter insights úteis, em tempo real, sobre
o desempenho da sua equipe.
Faça retrospectivas e reuniões sobre o sprint
Faça retrospectivas produtivas e reuniões melhores criando
itens de pauta claros com acompanhamento prático.
Troque ideias sobre desenvolvimento e produtos
Transparência para compartilhar, discutir e priorizar ideias
com os gerentes de produto e as partes interessadas com
recursos visuais e flexibilidade
Integração com Bitbucket ou GitHub
Mantenha a organização e chegue à programação com
rapidez, criando ramificações direto de onde você planeja,
acompanha e colabora no trabalho.
Fácil de configurar e gerenciar
Deixe tudo pronto em poucos cliques com uma solução
personalizável simples para atender aos requisitos exclusivos
da sua equipe.
Fonte: Atlassian, [S.d.].

A seguir veremos algumas ferramentas de mensageria que, devido às

suas características, são consideradas também como ferramentas
colaborativas.

2.3 Slack

O Slack é ferramenta de mensagem, uma das ferramentas mais

conhecidas e utilizadas no setor corporativo. O Slack utiliza o conceito de
canais, que são espaços organizados para cada aspecto do trabalho. Com
pessoas, mensagens e arquivos relacionados a um assunto em um único canal
a produtividade é agilizada, afetando também organização da vida profissional.
 O Slack tem uma versão gratuita, porém, se for necessário acesso a
histórico de mensagens ilimitado e integrações externas ilimitadas, há o custo
de US$ 80. O plano gratuito inclui:

• Acesso aos últimos 90 dias do histórico de mensagens;

• 10 integrações com outros apps como Google Drive, Office 365 e muito
mais;
• Conversas individuais de áudio e de vídeo com compartilhamento de
tela.

A figura abaixo mostra como é o ambiente do Slack.

Figura 3 – Interface do Slack

Fonte: Slack, [S.d.].

voltar

2.4 Teams
O Teams da Microsoft tornou-se gratuito para concorrer com ferramentas
como o Slack. O Teams tem como objetivo principal substituir o email, porém
conta com ferramentas como chamadas de vídeo, edição de documentos e
ainda permite integração com outros aplicativos. O Teams também torna o
trabalho mais produtivo. Na versão gratuita, cada reunião pode durar até 60
min. O plano gratuito inclui:

• Reuniões em grupo ilimitadas por até 60 minutos;

• Até 100 participantes por reunião;
• 5 GB de armazenamento na nuvem por usuário;
• Chat ilimitado com colegas de trabalho e clientes;
• Compartilhamento de arquivos, tarefas e pesquisas;
• Criptografia de dados para reuniões, chats, chamadas e arquivos.
 Figuras 4 e 5 – Interface Teams

Fonte: Teams, 2022.

Fonte: Teams, 2022.

voltar

2.5 Discord

O Discord não poderia ficar de fora dessa lista de ferramentas

colaborativas. Muito popular entre a comunidade gamer, apesar de ter sido
criado como um aplicativo para conectar gamers, sua evolução permitiu que
atualmente seja usado no mundo corporativo. O Discord pode também ser
utilizado online sem necessidade de instalação. De acordo com a página da
própria desenvolvedora: “Imagine um lugar… onde você possa pertencer a um
clube escolar, um grupo de gamers, ou uma comunidade artística mundial.
Onde você e alguns amigos possam passar um tempo juntos. Um lugar que
torna fácil conversar todos os dias e socializar com mais frequência” (Discord,
2022).
Além do mundo corporativo, muitas universidades também estão
utilizando o Discord para que os alunos possam socializar, organizar-se e se
enturmar.
O Discord sempre foi gratuito, porém oferece também uma versão paga,
conhecida como Versão Nitro. A Versão Nitro inclui emojis melhores, avatar
animado, upload maiores, vídeo HD-Vídeos, compartilhamentos de tela e
transmissões Go Live em alta resolução.

Figura 6 – Interface Discord

Fonte: Discord, 2022.

2.6 Zoom
O Zoom também entra na lista de ferramentas de colaboração. Como
plataforma de reunião virtual mais conhecida e utilizada no mundo, oferece
videoconferência e troca de mensagens simplificadas entre qualquer dispositivo,
permitindo a colaboração móvel. No plano gratuito o Zoom oferece:

• Reuniões o Até 100

participantes o Limite de 40
minutos
• Quadro de compartilhamento
o3 whiteboards
• Mensagem
o Chat e compartilhamento de arquivos em grupo

Aqui foram citadas apenas algumas ferramentas colaborativas dentre

inúmeras outras existentes.

voltar

TEMA 3 – VERSIONAMENTO E REÚSO

O reúso no desenvolvimento de software vai além da simples reutilização

de códigos em um programa. Reúso de código diz respeito a qualquer parte de
um sistema implementado anteriormente, podendo ser uma especificação,
módulo, arquitetura e padrões, dentre outras. Segundo Somerville (2019), o
reúso pode ser empregado em qualquer fase do projeto, desde a concepção até
sua implantação, e cada técnica aplicada dependerá dos requisitos do sistema,
da tecnologia, de ativos reusáveis disponíveis e do conhecimento da equipe de
desenvolvimento.
As vantagens para reúso de código inclui o aumento na produtividade,
redução do tempo de entrega do produto e consequente aumento da qualidade
do software. A ideia de reúso, no entanto, não é nova: surgiu no final década de
1960 na indústria de CIs e, devido ao aumento da complexidade de sistemas,
foi introduzida também no desenvolvimento de softwares. Como citado
anteriormente, o reúso engloba todo processo de desenvolvimento de
softwares. De acordo com Rozante (2003) outros fatores de qualidade de
software como funcionalidade, confiabilidade, usabilidade, eficiência,
manutenibilidade e portabilidade são afetados pelo reúso. A tabela abaixo
resume como o reúso afeta os fatores de qualidade de software. O termo
componente de software citado várias vezes por Rozante (2003) é qualquer
artefato ou produto de software como códigos, especificações de projeto,
conhecimento de domínio, experiência, processos, modelos de dados, métodos,
templates, entre outros.

Fator de qualidade Como é afetada pelo reúso

A funcionalidade dos sistemas baseados em componentes de
software pode ser melhorada devido à possibilidade de
reutilização de sistemas similares como protótipos para
captura dos requisitos funcionais (o que pode otimizar tal
função). Além disso, o reúso possibilita o descobrimento de
Funcionalidade requisitos durante a avaliação dos possíveis componentes, a
oferta de funcionalidades adicionais e permite que diversos
usuários (durante o desenvolvimento de componentes
reutilizáveis) discutam o problema, descobrindo mais cedo
questões
latentes, as quais, em outra situação, poderiam somente ser
descobertas tardiamente.
Quanto à confiabilidade desses sistemas, esta é afetada de
maneira positiva e negativa pelo reúso de componentes.
Como fator positivo, pode-se citar o aumento da confiabilidade
do sistema devido ao uso correto de componentes bem
Confiabilidade testados, os quais, quanto mais utilizados, menos problemas
conterão. Por outro lado, o uso incorreto ou fora do escopo de
um componente, embora bem testado, constitui-se um risco
para o sistema.
A usabilidade do sistema pode ser melhorada pelo uso de
componentes já que estes normalmente obtiveram maior
Usabilidade dedicação no seu desenvolvimento. No entanto, componentes
com características suavemente diferentes podem não ser
aceitáveis para um sistema do ponto de vista da usabilidade.
Com relação à melhora de eficiência de sistemas baseados
Eficiência em componentes, ela ocorre visto que um maior esforço é
despendido e justificável na construção de um componente
 eficiente. Além disso, componentes específicos podem ser
adaptados para necessidades específicas, sendo mais
eficientes que componentes genéricos.
Quanto à manutenibilidade desses sistemas, esta pode ser
melhorada já que muitas das modificações que poderiam ser
necessárias já estão incorporadas ou planejadas nos
Manutenibilidade requisitos de desenvolvimento dos componentes. Ademais,
modificações fora do planejado, apesar de serem mais difíceis
de implementar, podem ter o seu custo dividido pelos diversos
"reusers" (ou reutilizadores).
Por fim, a portabilidade, por ser um importante aspecto
inerente ao desenvolvimento de componentes reutilizáveis, é
Portabilidade incorporada naturalmente ao componente.

Fonte: Rozante, 2003.

Além dos fatores de qualidade de software citados acima, outros fatores

como custo, produtividade e tempo de mercado também são influenciados pelo
reúso. O reúso reduz a quantidade de trabalho, o tempo de desenvolvimento e,
consequentemente, o custo de desenvolvimento, vantagens já citadas
anteriormente.
Mas se o reúso traz tantos benefícios, então por que não temos um maior
número de empresas que utilizam o reúso para abreviar o processo de
desenvolvimento?
A introdução do reúso no processo de desenvolvimento de software
envolve mudanças em diversos itens da empresa, como processos, técnicas e,
principalmente, a mudança na mentalidade da equipe, sendo, portanto, uma
tarefa difícil de ser executada. Os desafios listados para o reúso de software
são muitos e vai desde compreender a parte reutilizada, até a implementação
de prática de reúso e esbarra, ainda, na não existência de partes elaboradas
para reutilização.
Além dos fatores de qualidade de software que mencionamos, outros
fatores como custo, produtividade e tempo de mercado também são
influenciados pelo reúso. Ele reduz a quantidade de trabalho, o tempo de
desenvolvimento e, consequentemente, o custo de desenvolvimento, vantagens
já citadas anteriormente.
Mas, se o reúso traz tantos benefícios, então por que não temos um
maior número de empresas que o utilizam para abreviar o processo de
desenvolvimento?
 A introdução do reúso no processo de desenvolvimento de software
envolve mudanças em diversos itens da empresa, como processos, técnicas e
principalmente a mudança na mentalidade da equipe, sendo, portanto, uma
tarefa difícil de ser executada. Os desafios listados para o reúso de software
são muitos, desde compreender a parte reutilizada até a implementação de
prática de reúso, esbarrando ainda na não existência de partes elaboradas para
reutilização.
Sendo assim, há uma série de impedimentos para a reutilização de
software. O quadro a seguir mostra uma coletânea de problemas que dificultam
a implantação do reúso.

Quadro 2 – Dificuldades para implantação do reúso

Problema Causa

Muitos profissionais reescreveriam uma rotina

a partir do zero em vez de reutilizar uma
Síndrome NIH (Not Invented Here) rotina escrita por outra pessoa,
subentendendo-se que uma rotina não é boa
a menos que eles próprios a tenham escrito.

Muitos desenvolvedores estariam ávidos para

Medo de falhas reutilizar uma rotina se pudessem ter certeza
de que ela não introduziria falhas no produto.

A reutilização pode ser cara. Custos

envolvidos: o custo de tornar alguma coisa
Custo da reutilização reutilizável, o custo de reutilizá-la e o custo
para definir e implementar um processo de
reutilização.

Podem surgir questões legais com software

sob contrato. Em termos do tipo de contrato
normalmente estabelecido entre um cliente e
uma empresa de desenvolvimento de
software, o produto de software pertence ao
Questões legais
cliente. Portanto, se o desenvolvedor de
software reutilizar um componente desse
produto em um cliente diferente, isso se
constitui, essencialmente, como uma violação
de copyright do primeiro cliente.

Compreender a parte reutilizada Muitos profissionais não compreendem o que

reusar e como reusar.
 Implementação de prática de reúso e Objetivos e benefícios do reúso muitas vezes
mudança na mentalidade da equipe são percebidos apenas a longo prazo. Isso
pode desmotivar a equipe.

Fonte: Elaborado por Luciane Yanase Hirabara Kanashiro, com base em Schach, 2010, p. 222.

Apesar de estarmos citando componentes de software, a reutilização de

frameworks e arquitetura orientada a serviços (SOA) também são técnicas de
reúso. Outra estratégia que também contribui para o reúso é o versionamento,
cuja definição já foi apresentada. Agora, conheceremos um pouco mais sobre
versionamento e entenderemos qual é a sua contribuição para o reúso.
Monteiro (2021) define versionamento de um modo bem simples:

De maneira bem simples, os arquivos de um projeto são armazenados

em um repositório, no qual o histórico de suas versões é registrado.
Os programadores podem acessar e recuperar a última versão
disponível e realizar uma cópia local, que possibilitará fazer alterações
sobre ela. É possível submeter cada alteração executada ao
repositório e recuperar as atualizações feitas pelos outros membros da
equipe. (Monteiro, 2021)

Antes dos sistemas de controle de versão, controlar as versões de um

projeto de software era uma coisa complicada, feita manualmente. Era
necessário armazenar várias versões do projeto e não raramente a equipe se
perdia nessas versões. Poderia ainda ocorrer de um programador sobrepor a
função de outro ou ainda desenvolver uma versão utilizando uma função que já
foi sobrescrita por outro desenvolvedor. Com o advento dos controles de versão,
essa tarefa foi simplificada, ficando mais fácil reusar um código já pronto de
uma versão e/ou adaptá-lo a uma nova versão se necessário.
Sendo assim, um sistema de controle de versão dá suporte ao
desenvolvimento de software por meio do registro de histórico, permitindo que
mais de um programador realize as modificações concorrentemente, e
proporcionando ainda a manutenção de diferentes versões de um projeto.
Existem várias ferramentas de controle de versão no mercado, que serão
abordadas a seguir, em repositórios de códigos.

voltar
TEMA 4 – REPOSITÓRIOS DE CÓDIGOS

Guardamos todo os artefatos (componentes, códigos) em repositórios.

Podemos citar duas perspectivas de repositório: repositório de gerência de
configuração e repositório de reutilização.
Como repositórios de gerência de configuração, temos os sistemas de
controle de versão. De acordo com Monteiro (2021),

Um sistema de controle de versão, também conhecido como VCS (do

inglês Version Control System) ou SCM (do inglês Source Code
Management) na função prática da computação e da engenharia de
software, tem como finalidade gerenciar várias versões no
desenvolvimento de um documento qualquer. Isso garante a gestão de
forma mais inteligente e eficaz para organizar qualquer projeto,
possibilitando o acompanhamento de históricos de desenvolvimento,
atividades paralelas, customização de uma determinada versão e
finalidades específicas sem a necessidade de se alterar o projeto
principal ou até mesmo recuperar uma versão anterior, caso tenha
ocorrido perda de alguma informação.

De acordo com o Git Book ([S.d.]), o controle de versão é um sistema que

registra alterações em um arquivo ou conjunto de arquivos ao longo do tempo,
para que você possa lembrar versões específicas mais tarde. Isso quer dizer
que os sistemas de controle de versão são ferramentas que auxiliam a controlar
a mudança de versão nos códigos ao longo do projeto. Existem dois tipos de
sistema de controle de versão: centralizado e descentralizado (distribuído).
Basicamente, o sistema de controle de versão centralizado é composto por um
único servidor central e várias estações de trabalho. Os sistemas de controle de
versão descentralizado possuem diversos repositórios autônomos e
independentes para cada desenvolvedor.
Um dos sistemas mais conhecidos e utilizados por desenvolvedores é o
Git, porém, existem outros que também são considerados bons SCMs no
mercado. A seguir, veremos algumas das ferramentas de controle de versão
mais utilizadas e conhecidas e um resumo de suas características.
 Git o O Git foi desenvolvido por Linus Torvalds (criador do Linux)
utilizando a linguagem C, e atualmente é mantido por Jun Hamano, um
engenheiro de software japonês. No Git, cada diretório de trabalho é um
repositório com histórico completo das versões e não depende de acesso
a um servidor ou rede central, sendo distribuído. Inicialmente, essa
ferramenta visava ajudar os desenvolvedores do kernel do Linux na
tarefa de versionar, de forma eficiente, as mudanças no kernel que antes
eram versionadas por meio do BitKeeper (ferramenta que posteriormente
virou paga). O Git conta com interface gráfica agradável, trazendo
eficácia e desempenho ao processo de desenvolvimento de software.

• BitKeeper o BitKeeper é o sistema de gerenciamento de código que deu

origem ao Git. Anteriormente software proprietário, em 2016 passou a ser
open source sob a licença Apache 2.0. O BitKeeper é um SCM
distribuído rápido, pronto para a empresa e que pode ser dimensionado
para projetos muito grandes e até pequenos.
• Subversion o O Subversion é centralizado, possui código aberto, sendo
indicado para equipes menores reunidas em um mesmo espaço físico.
Popularmente conhecido pelos desenvolvedores como SVN, foi
desenvolvido em 2000 pela CollabNet e, posteriormente, em 2010,
rebatizado como Apache Subversion.
• Mercurial o O Mercurial é uma ferramenta gratuita e distribuída, utilizada
por grandes empresas como Facebook e Google. Escrito em Python
com uma pequena parte em C, por motivos de desempenho, o Mercurial
possui ainda interface fácil e intuitiva, e é open source.

Como repositório de reutilização, podemos mencionar vários, como

Bootstrap, Spring e Angular. A seguir, mostramos alguns repositórios e um
resumo de suas características. Informações detalhadas podem ser
encontradas na própria página do desenvolvedor da ferramenta.

Bootstrap o O Bootstrap é uma biblioteca de componentes front-

end muito popular entre os desenvolvedores front-end. O Bootstrap é
uma ferramenta gratuita para desenvolvimento HTML, CSS e JS.
Segundo a própria página da ferramenta, tem uma abordagem mobile
first, que é uma estratégia em que se otimiza o código para dispositivos
 móveis primeiro e, depois, começa a pensar em media queries para
aparelhos maiores.

• Github o O Github, já mencionado, é uma plataforma de hospedagem de

código que engloba recursos de controle de versão por meio de
ferramentas como o Git. Ele tem repositórios abertos que permitem que
desenvolvedores e futuros desenvolvedores possam acessar e reutilizar
os códigos dos projetos disponibilizados. Grandes empresas
disponibilizam seus Githubs para acesso.
• Spring o O Spring é um framework open source para a plataforma Java.
Segundo a própria desenvolvedora, um elemento-chave do Spring é o
suporte de infraestrutura no nível do aplicativo: o Spring se concentra no
“encanamento” dos aplicativos corporativos para que as equipes possam
se concentrar na lógica de negócios no nível do aplicativo, sem vínculos
desnecessários com ambientes de implantação específicos. O Spring
possui código aberto e oferece suporte completo para construir
aplicativos Java, estando na categoria de estrutura Java EE.
• Angular o É um framework para desenvolvimento web front-end,
desenvolvido pela Google utilizando typescript. Utilizado para
desenvolvimento de aplicações mobile e aplicações web desktop.

Além dos repositórios de conteúdo tradicionais, temos ainda os

chamados repositórios de ideias, que vão além de repositórios de códigos,
criando um espaço em que que os desenvolvedores e futuros desenvolvedores
podem trocar informações e dicas sobre ferramentas, códigos e linguagens. A
seguir, são listados alguns desses repositórios.

Oracle Developer o Várias empresas de TI oferecem verdadeiros

repositórios de ideias para desenvolvedores. A Oracle é uma delas.
Fundada em 1977 por Larry Ellison, Bob Miner e Ed Oates, como
Software Development
Laboratories. Em 1982, a empresa mudou seu nome de
Relational Software (SDL) para Oracle Corporation. Em 1995, Larry
Ellison apresentou uma estratégia de produto para fornecimento de
softwares Oracle via internet. Em 1999, o Oracle database foi
 nomeado como um dos produtos mais influentes da década de 1990.
Em 2010, a Oracle adquiriu a Sun Microsystems, consolidando sua
estratégia de projetar juntas hardware e software. Tornou-se, assim, o
administrador do Java. A Oracle se conecta a nuvem e sua
revolucionária arquitetura ajuda a fornecer uma nuvem de banco de
dados segura e consolidada
o Atualmente, a Oracle oferece um amplo e completamente integrado
conjunto de serviços de plataforma e aplicativos na nuvem. O site da
Oracle Developer traz dicas, eventos e ferramentas para
desenvolvedores. A empresa disponibiliza vários códigos para
desenvolvedores e futuros desenvolvedores no GitHub. Segundo seu
site, a Oracle Developer tem a missão de capacitar os
desenvolvedores e continuar apoiando tecnologias de código aberto.
Por meio do Oracle Cloud Infrastructure e suas 39 regiões de nuvem,
são oferecidas mais oportunidades do que nunca para disponibilizar a
tecnologia de código aberto para todos.

• Cisco o A Cisco tem um programa de desenvolvedor que ajuda

desenvolvedores e profissionais de TI a desenvolver aplicativos e
implementar integrações. O site (em inglês) traz guias, instruções e
conselhos para desenvolvedores de software corporativo. Mas tem
também a Cisco Networking Academy em colaboração com Cisco
DevNet, popularmente conhecida como Netacad. A Netacad oferece
capacitação com possibilidades de carreira. Segundo a própria Cisco
[S.d.]),

A Cisco Networking Academy transforma a vida de alunos, educadores

e comunidades com o poder da tecnologia, da educação e das
oportunidades de carreira. Disponível para qualquer pessoa, em
qualquer lugar. No momento, estamos oferecendo assistência para
que você ensine e aprenda remotamente. [...] A criação de uma ponte
até as oportunidades de emprego.

o Devido a sua importância na comunidade acadêmica, veremos com

mais detalhamento as características da Cisco Networking Academy.
Trata-se de um programa global de educação de TI e segurança
cibernética, que forma parcerias com instituições de ensino em todo o
mundo para capacitar pessoas com oportunidades de carreira. É o
 maior é mais longo programa de responsabilidade social corporativa
da Cisco.
o A Netacad começou como um ato comunitário. Em 1997, a Cisco
doou alguns equipamentos de rede para uma escola local, mas
ninguém recebeu treinamento, e os equipamentos ficaram inutilizados.
Essa doação inicial levou a uma observação muito importante de que
a tecnologia tem um poder transformador quando combinada com a
educação. A Cisco Networking Academy nasceu naquele dia,
enquanto a Cisco treinava os professores para construir suas redes.
o A Cisco Networking Academy cresceu rapidamente e deixou de ser
uma única escola para se tornar uma comunidade de alunos,
educadores, empregadores, ONGs, funcionários da Cisco e clientes,
sempre em expansão. Presente em 180 países, o programa ajuda a
formar comunidades e economias em todo o mundo, criando um canal
de talentos técnicos pronto para inovar e moldar o futuro. A Cisco
trabalha em parceria com mais de 29 mil educadores em 12 mil
academias, oferendo os melhores currículos para o mundo.

• AWS (Amazon Web Services) o Jeff Bezos fundou a Amazon em 5 de

julho de 1994. Durante muitos anos, ficou conhecida como uma loja de
livros. Por volta dos anos 2000, a Amazon viu a necessidade de uma
infraestrutura de TI. Em períodos como black friday e natal, a Amazon
verificava picos de utilização dos seus servidores e então viu a
necessidade de uma grande estrutura de TI espalhada pelo mundo. Em
2002, a empresa iniciou a AWS, que tem foco implacável no cliente e
utiliza o conceito de dogfooding. O dogfooding pode ser traduzido como
“comer sua própria comida de cachorro”, uma gíria da área de TI que se
caracteriza pelo desenvolvimento e utilização de seus próprios serviços.
A Amazon
se orgulha de demonstrar que utiliza o dogfooding e mostra isso
até mesmo nas páginas de erro, quando nos deparamos com alguma
página inexistente da Amazon. A figura a seguir ilustra uma mensagem
de erro quando encontramos algum link quebrado na Amazon.

Figura 7 – Mensagem de erro Amazon

Fonte: Amazon, 2022

o AWS também tem um programa acadêmico que prepara os alunos

para a vida profissional. A AWS Academy fornece às instituições de
ensino superior um currículo de computação na nuvem gratuito e
pronto para ensinar, que prepara os alunos para buscar certificações
reconhecidas no setor e tarefas na nuvem em demanda. Segundo a
própria AWS, o currículo fornecido pela AWS ajuda os educadores a
permanecer na vanguarda da inovação da Nuvem AWS, para que eles
possam equipar os alunos com as habilidades necessárias para serem
contratados em um dos setores que mais crescem.

• Mozilla o A Mozilla, detentora do navegador Firefox, também dispõe de

uma plataforma de aprendizagem denominada MDN, acrônimo para
Mozzila Developers Network). A MDN tem como missão prover uma
completa, exata e útil documentação para tudo sobre a open web, sendo
construído e suportado ou não pela Mozilla. Se é uma tecnologia aberta e
web, eles documentam. A Rede de Desenvolvedores da Mozilla (MDN) é
uma plataforma de aprendizagem em evolução para tecnologias da web
e o software que alimenta a web, incluindo padrões
web como CSS, HTML, e JavaScript, desenvolvimento de aplicativos
da open web e desenvolvimento de add-ons do Firefox.
o Os manuais das linguagens também são fontes importantes de
conhecimento. Antigamente, as versões oficiais dos livros de
linguagem de programação eram denominadas Bíblia. Hoje em dia,
podemos encontrar referências específicas das linguagens nos
próprios manuais da linguagem, geralmente disponibilizadas on-line.
Um exemplo é o manual do Python, a página oficial conta com uma
versão em português. A seguir, mostraremos algumas características
da página do manual de Python. É disponibilizada também uma breve
descrição da seção do Java na página da Oracle Developer e, ainda,
 uma referência de um site muito conhecido entre aprendizes das
linguagens de programação.
• Manual do Python o A página disponibiliza a referência da linguagem
Python. Esse manual de referência descreve a sintaxe e a semântica
central da linguagem, trazendo também uma seção com a Biblioteca
Padrão do Python. Para quem ainda não conhece, o Python é uma
linguagem de programação poderosa e fácil de aprender. Ela tem
estruturas de dados eficientes e de alto nível, bem como uma abordagem
simples, mas efetiva de programação orientada a objetos. A elegância de
sintaxe e a tipagem dinâmica de Python, aliadas à sua natureza
interpretativa fazem dela a linguagem ideal para programas e
desenvolvimento de aplicações rápidas em diversas áreas e na maioria
das plataformas.
• Site do Java o O site do Java, pertencente à empresa Oracle, também
traz uma sessão para developers com vários recursos como artigos e
podcasts, com tutoriais para quem quer aprender a linguagem Java.

• W3Schools

o Outro site interessante é W3Schools que traz referências e exemplos

didáticos de comandos em várias linguagens. Voltado para quem está
aprendendo uma nova linguagem, traz exemplos básicos de utilização
de comandos. Apesar de ser um site voltado para desenvolvimento
web, traz exemplos para várias linguagens como C, Java e Python.
Durante muito tempo, não teve uma boa reputação e era rechaçado
por desenvolvedores mais experientes, mas recentemente tornou-se
um site que tem boa reputação em relação a exemplos básicos para
linguagens entre os developers.

voltar

TEMA 5 – TESTES DE SOFTWARE, CONTROLE DE QUALIDADE E DEPLOY

Utilizamos teste de software para garantir que o software funcione

corretamente atendendo às especificações. Pressman (2021) afirma que o
teste de software é um elemento de um tema mais amplo, muitas vezes
conhecido como verificação e validação (V&V). Verificação refere-se ao
conjunto de tarefas que garantem que o software implemente corretamente uma
função específica. Validação refere-se ao conjunto de tarefas que asseguram
que o software foi criado e pode ser rastreado segundo os requisitos do cliente
(Pressman, 2021, p. 373).
Teste de software tem como objetivo revelar os erros de um software.
Embora no dia a dia utilizemos as palavras erro, bug, falha e defeito para nos
referirmos a qualquer erro no software, no âmbito de testes de software esses
termos têm conotações diferentes. Segundo o IEEE (Instituto de Engenheiros
Eletricistas e Eletrônicos) o termo defect (“defeito” em português) é utilizado
para definir uma imperfeição ou deficiência em um produto de software, sendo
que esse produto não atende aos requisitos ou especificações e precisa ser
reparado ou substituído. Cabe ressaltar que a palavra utilizada em inglês para
descrever essa imperfeição tem um outro termo com mesmo significado e que é
mais amplamente utilizado no desenvolvimento de software, esse termo é o
fault (em português, pode ser traduzido como “defeito”). O quadro a seguir
apresenta os termos em inglês e português e o significado de cada um deles.

Quadro 3 – Uso de termos

Uma ação humana que produz um resultado
error (mistake) erro/engano
incorreto.

Manifestação de um erro em software.

fault defeito (bug)
Popularmente conhecidos como bugs.

Incapacidade de um sistema ou componente de

failure software de executar suas funções exigidas
dentro dos requisitos de desempenho falha
especificados.

Uma failure ocorre quando uma fault

é
encontrada
.

Fonte: Kanashiro, 2022.

Segundo Delamaro (2022), essas definições não são seguidas o tempo

todo nem são unanimidade entre os pesquisadores e engenheiros de software,
principalmente em situações informais do dia a dia. Em particular, utiliza-se erro
de maneira bastante flexível, muitas vezes significando “defeito”, “erro” ou até
“falha” (Delamaro, 2022, p. 1).
No desenvolvimento de software, sabemos ainda que os custos de
modificar um software aumentam conforme o projeto avança. O gráfico a seguir
ilustra o aumento do custo para corrigir bugs. Observe que à medida que
avançamos nas etapas de desenvolvimento de software o custo para correção
de bugs aumenta consideravelmente. Além disso, quanto mais cedo esses bugs
forem detectados nos testes de softwares, mais fácil será corrigi-los.

Figura 8 – Custo x tempo

Custo para

Especificaç Desig Desenvolvime Test Liberaç

Tempo em que o bug é
Créditos: cidepix/Shutterstock.

Os testes de software garantem ainda que a qualidade do produto seja

alcançada. A garantia de qualidade de software é um conjunto de atividades
técnicas aplicadas durante todo o processo de desenvolvimento. Esse conjunto
de atividades engloba vários testes a fim de garantir um software de qualidade.
A figura a seguir representa uma estratégia de teste de software vista no
conceito de espiral proposto por Pressman.

Figura 9 – Estratégia de teste de software

De acordo com Pressman (2021), o teste de unidade começa no centro

da espiral e se concentra em cada unidade (por exemplo, componente, classe
ou objeto de conteúdo de WebApp) do software, conforme implementado no
código-fonte. O teste prossegue movendo-se em direção ao exterior da espiral,
passando pelo teste de integração, em que o foco está no projeto e na
construção da arquitetura de software. Continuando na mesma direção da
espiral, encontramos o teste de validação, em que requisitos estabelecidos
como parte dos requisitos de modelagem são validados em relação ao software
criado. Por fim, chegamos ao teste do sistema, no qual o software e outros
elementos são testados como um todo. Para testar um software de computador,
percorrese a espiral em direção ao seu exterior, ao longo de linhas que indicam
o escopo do teste a cada volta (Pressman, 2021, p. 376).
O quadro a seguir resume o que cada teste faz.

Quadro 4 – Testes
Conhecidos também como testes de interface com o usuário,
compõem as atividades que verificam se todos os requisitos estão de
acordo com o especificado e se foram realmente atendidos. Isso
Teste de sistema ocorre após a revisão de todos os componentes, ou seja, essa
atividade verifica se o que foi especificado está sendo atendido ou
atinge um padrão de qualidade que proporciona o aumento da
probabilidade de ser adquirido pelo usuário final.

Mostra se o software atende aos requisitos, se um programa faz o

Teste de Validação
que é proposto a fazer.

Tese de integração, verifica se as unidades se comunicam, se

Teste de Integração integram corretamente sem falhas. Realizado após serem testadas
as unidades individualmente.

teste de unidade ou unitários tem como objetivo testar pequenas

unidades em um sistema, ou seja, verificar pequenas unidades que
Teste de Unidade
compõem o sistema. Geralmente de responsabilidade do próprio
desenvolvedor
Fonte: Pressman, 2021.

Depois de tudo pronto, é feita a implantação do software, conhecida

também como deploy. Embora pareça fácil, implantar um software é uma tarefa
árdua. Na implantação de um software, é necessário, além dele, as suas
dependências, bem como interpretadores, compiladores, pacotes e extensões.
Existem ainda a configuração do ambiente, licenças de outros softwares e
senhas de banco de dados.
O tempo e esforço gastos para provisionar servidores, conectar com a
rede, configurar e atualizar patches de segurança, monitoramento e
gerenciamento podem ser minimizados utilizando o conceito de contêiner. O
contêiner surge para resolver um grande problema de desenvolvimento: um
programa rodar bem no ambiente de desenvolvimento e não funcionar em outro
ambiente.
 Basicamente, um contêiner é um pacote que contém um software e todas
as dependências necessárias para que ele execute e forneça facilidade de
manuseio e economia de tempo, facilitando a implantação (deploy).
Já vimos a definição de container e máquina virtual anteriormente, mas
iremos resgatar algumas definições para que seja possível uma melhor
compreensão da diferença entre os dois termos.
Segundo Mariano (2020), do ponto de vista do sistema operacional, os
contêineres são um método de virtualização do sistema operacional que permite
executar um aplicativo e suas dependências em processos isolados de
recursos. A virtualização consiste em uma tecnologia que possibilita a execução
de um SO dentro de outro por meio de máquinas virtuais (Virtual Machines –
VM), contexto em que uma única máquina física pode dividir recursos com
vários SO capazes de interagir ou se isolar completamente entre si. Por meio
desse processo, podemos aproveitar a capacidade do hardware ao máximo,
simplificar o gerenciamento e flexibilizar e ampliar o poder de processamento
sem que as aplicações sejam prejudicadas e sem risco de conflitos entre as VM:
é como se você tivesse um ou mais computadores distintos dentro de um único,
o que facilita também no caso de ambientes de testes, sem a necessidade de
um custo adicional com hardware (Mariano, 2020, p. 108).
A diferença entre contêiner e máquina virtual está relacionada
basicamente à escala e à portabilidade. A Redhat, líder mundial em soluções
empresariais de software open source e criadora do RedHat Linux e Fedora,
adquirida pela IBM em 2019 para concorrer com as gigantes como AWS e
Microsoft Azure, diferencia contêineres de máquinas virtuais da seguinte forma:

• Geralmente, os contêineres são medidos em megabyte. Eles contêm, no

máximo, a aplicação e os arquivos necessários para executá-la. Além
disso, costumam ser usados para empacotar funções individuais que
realizam tarefas específicas, os famosos microsserviços. Como são leves
e têm um sistema operacional compartilhado, os contêineres são muito
fáceis de migrar entre vários ambientes.
• As máquinas virtuais são medidas em gigabyte. Costumam ter seu
próprio sistema operacional, o que possibilita a execução simultânea de
várias funções com uso intenso de recursos. Por terem um número maior
de recursos à disposição, as máquinas virtuais são capazes de abstrair,
 dividir, duplicar e emular por inteiro servidores, sistemas operacionais,
desktops, bancos de dados e redes.

Ou seja, com a virtualização, é possível executar sistemas operacionais

simultaneamente em um único sistema de hardware, já os contêineres
compartilham o mesmo kernel do sistema operacional e isolam os processos da
aplicação do restante do sistema.
A figura a seguir ilustra a diferença entre contêiner e virtualização. À
esquerda, temos um esquema de virtualização no qual podemos ter várias
sistemas operacionais (uma simulação de hardware para cada SO), sendo
controlados pelo hypervisor da máquina hospedeira. À direita, temos o esquema
de contêiner, no qual as aplicações executam isoladas utilizando o kernel do
sistema operacional hospedeiro.

Figura 10 – Virtualização e contêiner

Um dos exemplos mais icônicos de contêiner é o Docker. Lançado em

2013, ele introduziu o que se tornaria o padrão do setor para contêineres.
Resolveu a dor de cabeça de milhões de desenvolvedores solucionando o
problema do “funciona na minha máquina...”. Para muitos desenvolvedores, o
Docker é a referência quando se fala em criar e compartilhar aplicativos em
contêineres – do desktop à nuvem. Docker é baseado no LXC, que é um
container Linux e implementa várias funções do LXC com o adicional de
trabalhar com microsserviços e poder ser utilizado em várias plataformas
(Linux,Windows, Unix).

voltar
Aula 4 - CONVERSA INICIAL

Nesta etapa, faremos uma introdução ao HTML, uma linguagem de

marcação de texto, que é utilizada na construção de páginas na web. Veremos
alguns exemplos práticos que servirão de base para os primeiros passos para o
desenvolvimento de websites.
Ao final desta etapa, esperamos atingir os seguintes objetivos, que serão
avaliados ao longo da disciplina da forma indicada.

Quadro 1 – Objetivos da aula

Objetivos Avaliação

1. Domínio sobre os principais comandos HTML Questionário e questões

dissertativas

2. Capacidade para desenvolver páginas web simples Questionário e questões

dissertativas

3. Conhecimento prático e teórico sobre a função do HTML como Questionário e questões

ferramenta de desenvolvimento web. dissertativas

TEMA 1 – INTERNET HISTÓRIA E INFRAESTRUTURA

Neste tópico, vamos discutir o princípio da internet e como é a

infraestrutura na qual ela funciona. Assim, entenderemos melhor a necessidade
do surgimento do HTML e sua importância.

voltar

1.1 História da internet

No fim da década de 1960, a primeira rede de computadores surgiu.

Chamava-se Arpanet e tinha a finalidade militar de assegurar uma forma segura
de transmitir dados em postos de batalha no contexto da Guerra Fria. Ela
operava ligando 4 universidades no Oeste dos Estados Unidos da América.
Um conceito importante é o de protocolo de comunicação, que são as
regras para estabelecer comunicação entre dois ou mais softwares e/ou
hardwares. Os protocolos dizem que tipo de mensagens pode ser enviado e
como deve ser o formato dessas mensagens, assim permitindo que a
comunicação seja estabelecida sem imprevistos.
Mesmo nesse formato primitivo de internet, já possuía protocolos
importantes que são utilizados até os dias de hoje. O protocolo NCP – Network
Control Protocol (Protocolo de controle de rede) combinava os demais
subprotocolos de comunicação como:

• FTP – File Transfer Protocol (Protocolo de Transferência de Arquivos).

Como o nome sugere, é um protocolo para transferência de arquivos, é
utilizado até hoje para enviar arquivos de uma máquina para outra;
• SMTP – Simple Mail Transfer Protocol (Protocolo Simples de
Transferência de Correspondência). É o protocolo por meio do qual
trocamos e-mails;
• DNS – Domain Name System (Sistema de Nomes de Domínios).
Sistema pelo qual os nomes dos sites são associados aos seus
endereços de rede.

O DNS não é exatamente um protocolo, mas sim um sistema de nomenclatura

para computadores. É a estratégia adotada para associar o nome de uma
página web, por exemplo, http://www.google.com.br com o seu endereço físico
e consequentemente permitindo o trajeto do caminho que os dados devem
percorrer. É um elemento importante da infraestrutura da internet até hoje.
Em 1973, o protocolo NCP recebeu um grande concorrente, o protocolo
TCP/IP, que foi a combinação de dois protocolos desenvolvidos por dois
pesquisadores distintos que, em parceria, conseguiram solucionar diversos
problemas existentes na época.
O protocolo TCP – Transmission Control Protocol (Protocolo de Controle de
Transmissão) apresentou a ideia de quebrar as mensagens transmitidas em
pequenos pacotes. Assim, em caso de falha de comunicação, apenas um
pequeno trecho se perderia, e a comunicação poderia continuar de onde parou
sem maiores prejuízos.
E o protocolo IP – Internet Protocol (Protocolo de Internet) permitiu uma
estratégia mais elaborada de endereçamento das máquinas na rede,
possibilitando que um grande número de computadores fosse adicionado na
rede. Como a Arpanet previa um número relativamente baixo de computadores,
a escalabilidade não era um problema, porém, à medida que novos públicos e
usos para internet foram surgindo, rapidamente se tornou uma questão
importante.

Em aproximadamente uma década, o protocolo TCP/IP substituiu por completo

o NCP, e a constante ampliação da rede mundial de computadores foi
ininterrupta desde então. A seguir, nas Figuras 1 e 2 vemos um mapa desta
evolução.

Figura 1 – Representação dos primeiros anos da Arpanet nos EUA e seu

crescimento

Representação do mapa do cabeamento submarinos ligando todos os

continentes na década de 2020

Crédito: João Miguel.

1.2 Infraestrutura de comunicação

Como a internet passou a assumir esse importante papel de interligar

diversos computadores, surgiu a necessidade de dedicar máquinas para
fornecer serviços à rede. Tais máquinas são chamadas de servidores. Existem
diversos tipos de servidores: de e-mails, de arquivos, jogos on-line, banco de
dados, páginas web etc. As máquinas que usufruem desses serviços são
chamadas de clientes. Assim, estabeleceu-se o modelo de comunicação
chamado Cliente-Servidor, que é o mais importante quando se trata de páginas
web. Um computador dedicado disponibiliza o conteúdo do website que é
acessado por diversos clientes. Os clientes acessam o serviço por meio de
seus navegadores, aplicativos, jogos on-line. Enquanto os servidores oferecem
o serviço por meio de softwares especializados, no caso das páginas web
destacam-se Apache, Tomcat, Glassfish, entre outros.

– Representação da infraestrutura da internet e trajeto da comunicação

Crédito: Eliane Ramos.

TEMA 2 – PRINCIPAIS TECNOLOGIAS PARA A INTERNET

No princípio, a navegação em páginas web se dava por uma interface de

texto apenas, sem cores, imagens, sons ou variações de estilo de texto. O
principal software de navegação era o chamado Gopher, que pode ser visto na
Figura 4. Eis que então um importante pesquisador chamado Tim Berns-Lee
propôs uma nova forma de descrever documentos que permitisse uma interface
multimídia que atendesse a todas essas limitações do Gopher. Para isso
desenvolveu no início da década de 1990 três importantes tecnologias:
 • HTML – HyperText Markup Language (Linguagem de marcação de
hipertexto): uma linguagem descritiva com a qual é possível criar textos
com muito mais recursos de estilo e multimídia chamado hipertexto;
• O HTTP – HyperText Transfer Protocol (Protocolo de transmissão de
hipertexto): protocolo com o qual os servidores se comunicam com os
navegadores para exibir as páginas de hipertexto;
• WWW – World Wide Web (Rede Mundial de Computadores): espaço
virtual no qual é possível disponibilizar e acessar essas páginas, uma
vez que se tenha o endereço web.
– Página web no Gopher, software precursor dos navegadores
modernos

O HTML evoluiu bastante desde seu surgimento na década de 1990. No

momento da escrita deste documento, a versão 5 é a mais popular. Ela agrega
dentro dela diversas tecnologias que eram originalmente ferramentas
independentes e se tornaram pilares fundamentais para o desenvolvimento
web. São elas o HTML em si, o CSS e o JavaScript. As três linguagens serão
tópico de estudo desta e das próximas etapas.
O HTML é o que chamamos de uma linguagem semântica e que se
preocupa apenas em descrever o conteúdo da página. Não é, por exemplo,
papel do HTML dizer como a página deve interagir com o usuário ou como ela
deve se apresentar visualmente, apenas o conteúdo é relevante. É importante
observar que não se trata de uma linguagem de programação, mas sim de
descrição de documentos por meio do hipertexto.
O CSS – Cascading Style Sheets (Folha de estilo em cascata) é a
responsável pela aparência da página, descrever cores, estilo do texto, layout
etc. E também não é uma linguagem de programação, pois sua
responsabilidade é apenas descrever estilos.
Por fim, o JavaScript, essa sim uma linguagem de programação, é
responsável pela interação. A lógica e demais funcionalidades da página podem
ser implementadas aqui; o código, no entanto, é voltado para nível de cliente,
ou seja, executa lógicas que podem ser trabalhadas de dentro do navegador do
cliente sem interação imediata com dados que estejam no servidor.

voltar

TEMA 3 – PRIMEIRO HTML

O HTML, vale reforçar, não é uma linguagem de programação, mas sim

de uma linguagem de marcação de textos utilizada para que o seu navegador
estruture adequadamente páginas web. O HTML utiliza uma série de elementos
para incluir elementos, envolver ou marcar diferentes partes do conteúdo para
que apareça ou aja de uma certa maneira.
Cada trecho que desejamos marcar utiliza uma tag, que do inglês
significa etiqueta, e tem esse papel realmente de etiquetar conteúdos com
determinado comportamento e marcar que pertencem a determinada classe.
Por exemplo, se temos o texto:

Hoje foi um dia muito quente.

e queremos indicar que esse texto faça parte de um parágrafo, podemos

colocar o conteúdo entre a tag <p> da seguinte forma:

<p>Hoje foi um dia muito quente.</p>

Perceba que utilizamos o comando <p> para marcar o início do

parágrafo e </p> para marcar o fim do parágrafo. Sem a barra é a tag de
abertura e com a barra é a tag de fechamento. Uma tag também pode ser
colocada dentro de outra. Se, por exemplo, desejarmos colocar em bold a
palavra muito, temos a tag <strong> e ficaria da seguinte forma:

<p>Hoje foi um dia <strong> muito </strong> quente.</p>

Para realizar seus testes, basta utilizar um editor de texto simples

qualquer, no entanto recomendamos o Visual Studio Code, por oferecer
diversas facilidades para escrever códigos HTML, CSS e Javascript. Porém
qualquer editor de texto serve, basta deixar o arquivo com extensão .html e
depois de editado e salvo abri-lo com o navegador de sua preferência.
Saiba mais

Como alternativa ao editor de texto, temos um dos mais importantes

websites para aprendizado de tecnologias de desenvolvimento web, incluindo o
HTML é o w3schools. Nele, além de diversas explicações sobre as o uso das
tags, é possível rapidamente fazer testes sem a necessidade de realizar
instalação de nenhuma ferramenta adicional.
W3SCHOOLS. Disponível em: <https://www.w3schools.com/>. Acesso
em: 16 fev. 2023.
No entanto para testes rápidos outro site ainda mais conveniente e que
recomendados bastante é o jsfiddle, que pode ser acessado no link a seguir.
Ele combina tanto HTML quanto CSS e JavaScript, que são as três tecnologias
que veremos neste estudo:
JSFIDDLE. Disponível em: <https://jsfiddle.net/>. Acesso em: 16 fev.
2023.
Agora que sabemos o que são as tags HTML, veja na sequência como
podemos utilizá-las para gerar nossa primeira página HTML. Trata-se de uma
página básica composta apenas de um título e um texto sem formatação
nenhuma no corpo da página.

<!DOCTYPE html>

<html>

<head>

<title>Título na aba do navegador</title>

</head>

<body>

Texto que vai aparecer no corpo da página

</body>

</html>
 A tag <!DOCTYPE html> é uma tag especial, que não tem abertura e
fechamento; ela é uma tag solitária e indica qual a versão do html estamos
utilizando. No caso da forma que foi descrito, indica que a versão é o html
corrente, ou seja, o html5.
Já a tag <html> indica que seu conteúdo é a totalidade da página html
em si.
No caso da tag <head> indica o cabeçalho da página e recebe
informações que dizem respeito a página como um todo.
A tag <title> indica, por sua vez, o conteúdo que será apresentado no
título da página, geralmente na aba do navegador.
Por fim, <body> indica o corpo da página, e todo o conteúdo dela estará
presente aqui dentro.

TEMA 4 – SINTAXE

O principal elemento do HTML são justamente as tags, cuja sintaxe

funciona da seguinte maneira:

• Tag de abertura: trata-se do nome do elemento que é apresentado

entre os sinais de menor e maior, também chamado de parênteses
angulares de abertura e fechamento. A tag indica onde o elemento
começa a aplicar o seu efeito. No exemplo dado acima, a tag p foi
iniciada marcando o começo do parágrafo;
• Tag de fechamento: semelhante à tag de abertura, exceto que inclui
uma barra antes do nome do elemento e não é necessário repetir
eventuais atributos. Ela representa o fim do elemento. No exemplo, o
final do parágrafo;
• Conteúdo: como o nome sugere, é o conteúdo da tag. Neste exemplo, é
o texto somente;
 • Elemento: formado pelo conjunto de tudo, a tag de abertura, a de
fechamento e o conteúdo;
• Atributo: elemento extra que transmite informações adicionais. Quando
não é utilizado, a tag apresenta um comportamento padrão. Neste
exemplo, o style é o nome do atributo e font-size:40px é o valor do
atributo.
Esse atributo define a formatação da fonte do texto para tamanho de 40
pixels.

Ainda sobre o atributo, é importante atentar para suas regras de sintaxe:

• É possível que exista mais de um atributo, no entanto é essencial que

exista um espaço os separando;
• O nome do atributo deve ser sempre seguido do sinal de igual (=) para
separar o nome do valor do atributo;
• O valor do atributo deve ser sempre envolto por aspas duplas.

4.1 Aninhamento

É importante reforçar que podemos também colocar um elemento dentro de

outro, o que chamamos de aninhamento. Vamos retomar o exemplo visto
anteriormente:

<p>Hoje foi um dia <strong> muito </strong> quente.</p>

É importante que o elemento que foi aberto mais interno seja fechado
antes do elemento mais externo, ou seja, o </strong> precisa vir antes do </p>.
Se invertermos a ordem dos dois, estaria incorreto.

4.2 Elemento vazio

Nem todos os elementos possuem conteúdo, e esses que não possuem

são chamados de elementos vazios. Um exemplo importante é o elemento
<img>, que é utilizado para colocar uma imagem na página.

<img src="imagens/teste.jpg" alt="Descrição da imagem">

O elemento possui uma tag de abertura com dois atributos, mas nenhum
conteúdo e nem tag de fechamento. A finalidade desse elemento é carregar
uma imagem na página e não envolver algum conteúdo interno com certo
comportamento, por isso basta apenas a tag de abertura.

voltar

TEMA 5 – PRINCIPAIS COMANDOS HTML

Neste tópico, vamos avançar a discussão sobre os principais elementos

HTML.
5.1 Cabeçalhos

Para dar uma aparência diferenciada e destacar título, subtítulos,

cabeçalhos e afins, temos um conjunto de 6 tags HTML. h1, h2, h3, h4, h5 e h6.
Sendo h1 o maior destaque, e h6 o menor. A letra “h” indica justamente a
palavra header no inglês, que quer dizer cabeçalho. Teste o código a seguir.

<h1>Título 1</h1>
<h2>Título 2</h2>
<h3>Título 3</h3>
<h4>Título 4</h4>
<h5>Título 5</h5>
<h6>Título 6</h6>

5.2 Parágrafos

Os parágrafos no HTML utilizam a tag p, que organiza o texto com o

espaçamento como em blocos, um abaixo do outro.

<p>Parágrafo com texto 1.</p>

<p>Parágrafo com texto 2.</p> <p>Parágrafo com

texto 3.</p>
5.3 Imagens

A tag img é a que coloca imagens em páginas html. Ela é uma tag vazia,
que não precisa de fechamento nem conteúdo, apenas a tag de abertura, no
entanto é importante que ela utilize atributos, especialmente o atributo src, que
aponta o arquivo de origem. O atributo alt é opcional, mas muito recomendado.
É utilizado para descrever a imagem, o que é útil para tornar a página acessível
para quem possua limitações de visão ou por questões ligadas à conexão não
possam carregar a imagem. A tag title também é opcional e traz um título para a
imagem que é exibida ao colocar o cursor do mouse sobre a imagem, o texto
do atributo title aparecerá em uma tooltip – caixa de texto.
<img src="minha_imagem.png" alt="Texto descritivo"
title="Exemplo de imagem" />

5.4 Links

Os links são geralmente utilizados para direcionar o usuário para outra

página ao ser clicado, mas também podem levar para outra área da mesma
página. A tag é apenas a letra “a” e precisa do atributo href que indica o destino
do link. No conteúdo deve estar presente que será exibido.

<a href="outrapagina.html">Outra página</a>

5.5 Tabelas

As tabelas são geralmente utilizadas para exibir dados de forma

organizada em linhas e colunas. No entanto, é possível utilizar tabela para
organizar qualquer tipo de conteúdo. Em versões mais antigas do HTML, as
tabelas foram muitas vezes utilizadas para formatar o estilo da página, porém
no HTML moderno existem outros meios mais adequados de formatar o layout,
e o uso de tabelas basicamente se restringe à organização de dados apenas. A
tag table indica a definição de uma tabela, a tag tr indica linhas e td indica a
célula da tabela, ou seja, cada dado individual.

<table>

<tr>
 <td>Linha 1 - Coluna 1</td> <td>Linha 1 -

Coluna 2</td>

</tr>

<tr>

<td>Linha 2 - Coluna 1</td> <td>Linha 2 -

Coluna 2</td>

</tr>

<tr>

<td>Linha 3 - Coluna 1</td> <td>Linha 3 -

Coluna 2</td>

</tr>

</table>

Além destas tags principais, existem também outras que organizam a

tabela em cabeçalho com a tag thead; o corpo com a tag tbody; e o rodapé da

tabela com a tag tfoot.

<table>
<thead>
<tr>
<th>Mês</th>
<th>Valor Arrecadado</th>
<th>Participantes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Janeiro</td>
<td>R$ 500,00</td>
<td>1</td> </tr>
<tr>
<td>Fevereiro</td>
<td>R$ 350,00</td>
<td>2</td> </tr>
</tbody>
<tfoot>
<tr>
<td>Total</td> <td></td>
<td>R$ 850,00</td>
</tr>
</tfoot>
</table>

5.6 Listas
No HTML, as listas são utilizadas principalmente para organizar um
grupo de itens em formato de lista ordenadas. É possível criar três tipos
diferentes de lista. com a tag ol a lista é não numerada e com ul a lista é
numerada. Opcionalmente a lista pode receber uma descrição com a tag dl.
Cada item na lista é indicado com a tag li. Abaixo apresentamos os dois tipos
de lista. Também é possível aninhar uma lista dentro da outra, ou seja, criar
uma lista no conteúdo de um item de outra.

<ol>

<li>Janeiro</li>

<li>Fevereiro</li>

<li>Março</li>

</ol>
<ul>

<li>Janeiro</li>

<li>Fevereiro</li>

<li>Março</li>

</ul>

5.7 Formulários
Os formulários HTML são o principal meio utilizado para transmitir
informações do usuário para o servidor. Utilizamos a tag form para indicar a
área do formulário e dentro dela colocamos todos os elementos de entrada de
dados necessários para cada informação. a tag input é utilizada para esses
elementos de entrada de dados, e o seu atributo type indica qual tipo específico
de dado será utilizado.

<form action="pagina_destino.php" method="post">

<input type="text" placeholder="Digite aqui seu

nome"> <br/>

<input type="radio" name="pais">Nacional <br/>

<input type="radio" name="pais">Estrangeiro <br/>

<input type="checkbox">Concorda com os termos? <br/>

<input type="submit" value="Enviar">

</form>

voltar

Aula 5 - CONVERSA INICIAL

Vamos dar continuidade aos conteúdos de desenvolvimento de páginas

web discutindo outra tecnologia de muita importância para ditar a aparência das
páginas. Essa tecnologia é o cascading style sheets (CSS, folha de estilo em
cascata), em que apenas trocando o arquivo CSS de uma página web é
possível alterar completamente o layout de um mesmo conteúdo, tecnologia
mais relevante para essa função. Vamos aprender tanto a sintaxe geral quanto
especificações dos principais comandos da linguagem de estilos.
voltar

TEMA 1 – DEFINIÇÃO DO CSS

O cascading style sheets (CSS, folha de estilo em cascata) controla

como os elementos são apresentados na tela, enquanto o HTML diz o que a
página deve ter, por exemplo, e indica onde estão os parágrafos, imagens,
listas etc. O CSS vai dizer como esses parágrafos devem ser, que fonte de
texto utilizam, qual o tamanho da imagem, que cor deve aparecer a numeração
da lista e assim por diante.
E quanto ao nome cascata? O que quer dizer? Assim como uma
cascata no mundo real é composta por sucessivas quedas d'água, o estilo das
páginas segue uma organização similar. É possível criar vários arquivos para
definir a aparência da página. Primeiramente, um layout bem genérico de todo
o site como um todo, depois um arquivo mais específico descrevendo uma
página em particular, outro mais específico ainda para descrever como a tabela
deve funcionar dentro daquela página em particular, por exemplo. Cada
elemento HTML vai combinando essas instruções de layout seguindo todas
tanto quanto possível e, em caso de conflito, optar pela instrução mais
específica e menos generalista.
É possível descrevermos HTML e CSS dentro de um mesmo arquivo e
colocar tudo em um único arquivo .html. No entanto, como boa prática de
escrita de páginas web, é interessante separar em um arquivo .css próprios,
tornando, assim, o projeto mais organizado. Pense que, quando uma
atualização na página for necessária e ela afetar apenas o estilo da página,
somente o arquivo .css correspondente precisará ser modificado.
Em versões mais antigas do HTML, como a versão 3.2, algumas funções
de estilo foram adicionadas na linguagem, por exemplo: a tag font servia para
definir fonte de texto, entre outros exemplos. E esse tipo de estratégia para
definir estilo se mostrou muito ineficiente pela quantidade de retrabalho gerado.
Vamos supor que você tenha um site composto por 50 páginas web
diferentes. Cada página web tem seu próprio arquivo .html e, como as páginas
pertencem ao mesmo site, a ideia é que todas compartilhem a mesma imagem
de fundo, estilo de texto, cores, organização dos botões nas páginas entre
outros. Todos esses códigos de estilo eram então repetidos 50 vezes – afinal,
são 50 arquivos diferentes e, caso em algum momento no futuro desejássemos
trocar o tamanho da fonte, essa mudança deveria ser feita 50 vezes. Vale
salientar que, além de ser ineficiente do ponto de vista da quantidade de
trabalho envolvido, são 50 oportunidades de um erro acontecer.
Já com o CSS, esse problema do retrabalho na definição do estilo das
páginas foi solucionado, uma vez que você pode escrever o estilo das páginas
uma única vez, em uma linguagem própria para descrever estilos, e as 50
páginas podem carregar esse mesmo arquivo, evitando retrabalho.
Ainda é possível utilizar tags de estilo HTML; pontualmente, pode ser
interessante ainda fazer pequenas intervenções dessa maneira, porém,
reforçando o que já foi dito, é uma boa prática de desenvolvimento e o estilo
deve ser colocado em páginas .css próprias.
Outra vantagem do CSS é que foi criado pela própria World Wide Web
Consortium (W3C, Consórcio da Rede Mundial de Computadores), que é a
organização composta por um consórcio de diversas empresas, órgãos
governamentais e independentes e responsável pela padronização da WWW.
E, sendo assim, ela é completamente integrada ao HTML, especialmente a
partir da versão 5.
A página da w3schools, além de possuir excelente material sobre html,
também detém um rico material sobre CSS. Da página da w3schools, veja um
exemplo de uma mesma página HTML modificando apenas o conteúdo do
arquivo de estilo CSS
Figura 1 – Representação dos diferentes estilos que uma página pode assumir
modificando apenas o CSS sem modificar o conteúdo HTML. A primeira
representação no canto superior esquerdo não possui estilo nenhum. O
conteúdo original pode ser encontrado no link
<https://www.w3schools.com/css/css_intro.asp>. Acesso em: 23 fev. 2023.
TEMA 2 – SINTAXE

Neste tópico, vamos discutir a sintaxe do CSS, novamente

recomendamos para testes o editor de texto do visual studio code ou o site do
jsfiddle, por meio do link <https://jsfiddle.net> (acesso em: 23 fev. 2023). Caso
você esteja fazendo o teste por um editor de texto, recomendamos criar uma
tag <style> </style> como última coisa dentro do conteúdo da tag head da sua
página, tudo o que estiver dentro da tag style será código CSS e não mais
HTML. Se estiver testando por meio do jsfiddle, pode editar no documento CSS
a parte.
Experimente criar no html da página um cabeçalho h1 com algum texto
qualquer, por exemplo <h1> sou um teste </h1>. Em um primeiro momento,
deverá aparecer em preto, em fonte maior que o texto normal, o conteúdo da
tag. Porém, se desejarmos modificar o comportamento das tags h1 em nosso
documento, podemos fazer no CSS o código h1 { color:blue; font-size:12px;}.
Esse código CSS irá transformar o comportamento das tags h1 para fonte
tamanho 12 pixels e cor azul. Vamos analisar em detalhes.

O primeiro trecho dos comandos CSS é o seletor e, como o nome

sugere, trata-se da seleção dos elementos afetados. Na sequência entre
chaves, vem a declaração, seletor e declaração são separados por um espaço.
A declaração pode alterar diversas propriedades – no exemplo, está alterando
as propriedades color e font-size, que, respectivamente, modificam a cor e o
tamanho da fonte do texto. Perceba que, logo após cada propriedade, vem o
símbolo dois-pontos, o novo valor da propriedade em questão. Por fim, ponto-e-
vírgula fecha a definição de cada propriedade.
A propriedade color foi alterada para blue – que, do inglês, significa azul.
Tem diversas formas de definir cores no CSS, e o nome das cores em inglês é
uma dessas formas. A propriedade font-size foi alterada para 12 pixels, mas
existem várias formas de mensurar tamanho de fonte no CSS, e contagem de
pixels é uma delas também.
É importante observar que essa mudança afeta todos os componentes
com tag h1 na nossa página. Se desejarmos fazer uma seleção mais
específica, afetar apenas um único h1 em particular ou uma classe deles,
também temos estratégias para isso, que serão abordadas no tópico a seguir.
voltar

TEMA 3 – SELETOR

Neste tópico, vamos debater um dos aspectos mais importantes para se

compreender e fazer bom uso do CSS: o seletor. Como o nome sugere, ele
seleciona quais elementos html serão afetados por aquele comando. Podemos
classificar alguns tipos diferentes de seletores. Veremos cada um deles em
maiores detalhes: seletor universal, por tag, por classe e pseudoclasse, entre
outros.
3.1 Seletor universal

O seletor universal seleciona todos os elementos e é representado pelo

asterisco *. Ele é interessante de ser utilizado sempre que desejamos afetar
todos os elementos da página – por exemplo, para definirmos a cor de texto
verde para todos os elementos, ficaria da seguinte forma:
*{ color:green;}

3.2 Seletor por tag

O seletor por tag irá selecionar todos os elementos da página que

possuam tag com aquele mesmo nome. No exemplo a seguir, as tags h1 terão
a cor do texto modificadas para verde, e os parágrafos terão a cor de fundo
alteradas para vermelho.
h1{ color:green;} p{

background-color: red;}

3.3 Seletor por classe

Por vezes, queremos selecionar tags específicas que possuem alguma

coisa em comum – digamos, por exemplo, que certos parágrafos e cabeçalhos
em nossas páginas alertam o usuário de alguma informação essencial e
desejamos dar um destaque somente para esses elementos. Então, na hora
criarmos o html da página, podemos identificar esses elementos como
pertencentes a certa classe alerta e depois, no CSS, modificar as
características somente dessa classe. Veja no exemplo a seguir:

<h1 class="alerta"> Leia atentamente</h1>

<p class="alerta"> As informações são sigilosas e

de suma importância.</p>

.alerta{ font-

weight:bold ;

color:red;
}
Para classificar o elemento html, basta colocar a propriedade class com
o nome da classe que você quiser criar. É possível que um elemento pertença
a várias classes e, portanto, basta separá-las por espaço, por exemplo < p
class="alerta titulo" >. O elemento p pertence, ao mesmo tempo, à classe
alerta e à classe titulo. Já no css, é importante marcar o seletor com o ponto .
para indicar que se trata de uma classe.
3.4 Seletor por id

O seletor por id é feito para identificar individualmente um elemento. Dos

vários parágrafos que a sua página possui, um você deseja estilizar de forma
diferente dos demais. Para isso, o parágrafo deve ser identificado com a
propriedade id, muito semelhante ao que foi feito com o seletor por classe, e,
em vez do ponto, no css, o marcador de id será a cerquilha #. Confira o
exemplo a seguir.

<p> parágrafo 1... </p>

<p id="invertido"> parágrafo 2... </p>

<p> parágrafo 3... </p>

#invertido{ background-

color:black ; color:white;

Importante: não se deve dar o mesmo id para mais do que um

elemento.

voltar
3.5 Seletor de filhos

O seletor de filhos é representado pelo símbolo > (maior que). E o que

quer dizer "filhos"? Seriam aqueles elementos que são conteúdos diretamente
de um outro elemento. Veja que, em uma página html padrão, todo o conteúdo
da página está dentro da tag body – portanto, são filhos de body e, por sua vez,
body e head estão dentro do conteúdo da tag html – logo, são filhos de html.
No exemplo a seguir, temos uma tag div com id div1 e todos os filhos
diretos dessa div específica terão cor de texto azul.
<div id="div1">

<h1>Meus parágrafos</h1>

<p> parágrafo 1... </p>

<p> parágrafo 2... </p>

<p> parágrafo 3... </p>

</div>

<p> parágrafo 4... </p>

<p> parágrafo 5... </p>

#div1 > p { color:blue;}

Neste exemplo, repare que estão sendo selecionadas apenas as tags p
que sejam filhos do elemento com id div1 – a tag h1 será ignorada e as tags p,
que não são filhos de div1, também.
A propósito, a tag div não possui nenhum efeito sozinha no html, ela
serve para gerar divisões lógicas para situações como essa, em que se deseja
separar alguns elementos de outros e dar comportamento específico para ele
por meio de código css ou Javascript associados. A tag span possui a mesma
finalidade – geralmente, div são blocos maiores e span para blocos menores de
uma única linha.
Note que o sinal de maior > seleciona somente os filhos diretos, caso
desejasse selecionar todos os descendentes, tanto filhos diretos como filhos de
filhos, bastaria omitirmos o sinal de maior, no exemplo ficaria.
#div1 p { color:blue;}

3.6 Seletor por irmão

Outra forma de selecionarmos no css é por irmãos, que entendemos que
sejam as tags que estão no mesmo nível hierárquico que também sejam filhos
do mesmo elemento-pai. Temos dois símbolos distintos para isso. O símbolo do
mais +, que marca o irmão mais próximo, e til ~ que, seleciona todos os irmãos.
Confira no exemplo a seguir.
<div id="div1">

<p id="par1"> parágrafo 1... </p>

<p> parágrafo 2... </p>

<p> parágrafo 3... </p>

</div>

<p> parágrafo 4... </p>

<p> parágrafo 5... </p>

#par1 + p{color:blue;}

#par1 ~ p{color:blue;}
No exemplo, temos dois CSS distintos: um com o sinal de + e outro com
o sinal de ~. Teste ambos e veja a diferença: no primeiro caso, está sendo
selecionado o próximo parágrafo-irmão daquele com id par1 e, no segundo
caso, todos os irmãos e não apenas o mais próximo.
3.7 Seletor por pseudoclasse
O seletor por pseudoclasse seleciona elementos que recebem
determinada classe interna do sistema. Isso acontece mediante certas
condições: se o elemento atende àquelas condições, terá a classe e será
alterado, caso contrário não. É possível tornar o css um pouco mais interativo
com isso. O exemplo clássico de pseudoclasse é o hover, que é marcada
quando o elemento está com o cursor do mouse sobre ele. Confira o exemplo a
seguir:
<p> parágrafo 1... </p>

<p> parágrafo 2... </p>

<p> parágrafo 3... </p>

<p> parágrafo 4... </p> <p>

parágrafo 5... </p>

p:hover{color:red;}

No exemplo, os parágrafos que estiverem com o cursor sobre si mesmos

mudarão sua cor para vermelho. A lista de possíveis pseudoclasses é bem
extensa, e alguns exemplos são:

● :active – para quando um link é está sendo clicado;

● :checked – para quando um checkbox ou radiobutton está marcado;

● :empty – para quando um determinado elemento não tem filhos; e

● :first-child – para quando o elemento é o primeiro filho de seu elemento

pai.

Recomendamos o site da w3schools para a listagem completa das

pseudoclasses com exemplos.
voltar

TEMA 4 – ORDEM DA CASCATA DE ESTILO

Neste tópico, vamos entender melhor um conceito da precedência da
ordem de estilo. Suponha que múltiplas regras CSS estejam afetando um
mesmo conjunto de elementos html e que essas regras estejam afetando
algumas propriedades em comum: qual regra que vai valer de verdade? Em
outras palavras, qual regra terá precedência?

<head> <style> body {font-family:

Arial; font-size: 14px;} p {font-
size: 16px;}
.logo {font-family: Helvetica;font-
size : 20px;}
</style>
</head>

<body>
<div id="cabecalho">
 <span class="logo">Minha Logo</span>
</div>
<div id="corpoPagina">
<p>
Corpo da página...
</p>
</div>
</body>
Este exemplo contém três regras CSS. Todas as três regras CSS
definem a propriedade font-size e duas das regras CSS definem a propriedade
fontfamily. A regra CSS para o elemento body é herdada pelos elementos div,
span e p. Além disso, o elemento span possui uma regra CSS direcionada a ele
por sua classe logo e o elemento p possui uma regra CSS direcionada a todos
os elementos p. Quais estilos acabam sendo aplicados para os elementos span
e p elementos?
Quando o navegador precisa decidir quais estilos aplicar a um
determinado elemento HTML, ele usa um conjunto de regras de precedência
CSS. Dadas essas regras, o navegador pode determinar quais estilos aplicar.
As regras são:

1. A presença do comando !important.

2. Especificidade dos seletores de regras CSS.
3. Sequência de declaração.

Detalhes do que essas regras significam nas seções a seguir.

Observe que a precedência CSS ocorre no nível da propriedade CSS.
Portanto, se duas regras CSS tiverem como destino o mesmo elemento HTML
e a primeira regra CSS tiver precedência sobre a segunda, todas as
propriedades CSS especificadas na primeira regra CSS terão precedência
sobre as propriedades CSS declaradas na segunda regra. No entanto, se a
segunda regra CSS contiver propriedades CSS não especificadas na primeira
regra CSS, elas ainda serão aplicadas. Em outras palavras, as regras CSS são
combinadas quando possível.
voltar
 4.1 Comando !Important
Se você precisar que uma determinada propriedade CSS tenha
precedência sobre todas as outras regras que definem a mesma propriedade
para os mesmos elementos HTML, você pode adicionar a instrução !important,
a qual tem precedência mais alta de todos os fatores de precedência. Confira o
exemplo.

<style>
div {
font-family: Arial;
font-size: 16px !important
;
}
.especial{
font-size: 18px;
}
</style>

<div class="especial"
>
Texto especial.
</div>
Nesteexemplo
, a precedência no que diz respeito
à propriedade
font-size
seria a da classe .especial por ser mais específica; no entanto, por conta da
instrução !important, tem prioridade a instrução font-size:16px.
voltar

4.2 Especificidade dos seletores

As prioridades seguem a abstração de uma cascata, daí o nome
cascading style sheets (folha de estilo em cascata, CSS). Todos os atributos
são aplicados de forma combinada e, em caso de conflito, vale aquele cujo
seletor seja mais específico, conforme o Quadro 1 a seguir.
Quadro 1 – Seletores e especificidades

Seletor Descrição
Estilo herdado Especificidade mais baixa de todos os seletores – trata-
se do estilo herdado do elemento-pai.
 * Hierarquicamente acima do estilo herdado e abaixo
dos demais, temos o seletor universal.
elemento Maior especificidade do que o seletor universal e
estilos herdados.

atributo Maior especificidade do que o seletor de elemento.

classe Maior especificidade do que atributos, elementos e
seletores universais.

id Especificidade mais alta que o seletor de classe.

Seletor combinado Obtém a especificidade dos seletores combinados.

Propriedade Especificidade mais forte que o seletor de ID.
definida
internamente com
atributo style
Por fim, se temos dois atributos conflitantes com o mesmo seletor, o que
vale é o que vem por último, pois o que sequencialmente veio depois terá maior
prioridade.
voltar

TEMA 5 – PRINCIPAIS COMANDOS CSS

Neste tópico, vamos discutir alguns dos principais comandos CSS e
mostrar exemplos de uso.
5.1 Cores
As cores no CSS são utilizadas em diversos comandos distintos e
existem três formas de representa-las, conforme a lista a seguir.

● Nome das cores em inglês: existe uma lista vasta de nomes de cores
em inglês que é reconhecida pelo CSS que internamente substitui por
uma cor predefinida, é uma representação muito útil para realizar testes
rápidos e tornar o código facilmente legível. Importante notar que não é
sensível a maiúsculas e minúsculas, red, Red ou RED vão representar a
cor vermelha da mesma forma.

● Valor RGB: a sigla RGB vem das palavras red, green, blue (vermelho,
verde, azul) e diz respeito à combinação dessas cores. O padrão RGB é
muito famoso e utilizado em diversos outros contextos, especialmente
digitais. Quando combinadas, essas três cores-base podem gerar
 qualquer outra cor do espectro visível, pois a ideia é que cada canal de
cor seja representada por um entre 0 e 255 (ou seja, 1 byte para cada
canal de cor), e é representado sempre na ordem vermelho, verde e
azul; então, por exemplo: RGB (255,105,0) é uma cor que combina
100% de vermelho – por isso o 255, um pouco acima dos 40% de verde
– por isso 105, e nada de azul – por isso o valor 0 no fim, o que dá uma
cor alaranjada.
● Valor hexadecimal: essa representação é igual a RGB, porém, um
pouco mais compacta, em vez de utilizarmos números decimais,
utilizamos hexadecimal 2 dígitos para cada canal de cor com uma
cerquilha na frente e todos os valores juntos, por exemplo: #00ff00 é
igual a RGB (0,255,0), que representa a cor verde.

voltar

5.2 Background-color
O background-color é um atributo que modifica a cor de fundo do
elemento, por exemplo:
body{background-color: lightblue;}
body{background-color: rgb(173,216,230);}
body{background-color: #add8e6;}
Os exemplos anteriores são três formas distintas de colocar a cor
azulclara no fundo de todo o corpo da página.
5.3 Background-image
O background-image é o atributo para colocar uma imagem de fundo nos
elementos selecionados. Veja no exemplo a seguir que é necessário colocar,
no entanto, o endereço relativo do arquivo contendo a imagem dentro dos
parênteses comando url(). Caso o elemento seja maior do que a imagem, ela,
por padrão, irá se repetir vertical e horizontalmente. Com a propriedade
background-repeat, é possível configurar esse comportamento para que a
imagem não se repita ou seja repetida apenas em um eixo. Os valores para o
atributo são: no-repeat, repeat-x ou repeat-y. Respectivamente não repete,
repete no eixo horizontal, repete no eixo vertical.
body{ background-
image:url("imgs/gatinhos.jpg"); background-
repeat: repeat-x;
}
No exemplo, a imagem gatinhos.jpg, que está localizada na pasta imgs,
será adicionada ao fundo do corpo da página e, caso a página seja mais larga
do que a imagem, ela será repetida horizontalmente, mas não verticalmente.
voltar

5.4 Margin
A margem é como chamamos o espaço que fica em volta da borda do
elemento HTML, e é possível configurar quanto de espaço vazio desejamos
que exista em torno daquele elemento. Confira no exemplo a seguir os
atributos margin-top, margin-bottom, margin-right e margin-left,
respectivamente a quantidade de pixels que terá de espaço no topo, fundo,
direita e esquerda:
p{ margin-top:100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Existem formas mais simplificadas de descrever o tamanho das
margens. Caso apenas com o atributo margin seja fornecido com um único
valor, ele vale para todos os lados. Se dois valores forem dados, o primeiro irá
para as margens verticais e o segundo para as horizontais. E, caso quatro
valores sejam dados, daí serão aplicados para as margens superior, direita,
inferior e esquerda, nessa ordem.
voltar

5.5 Padding
O conceito de padding, preenchimento, é semelhante ao da margem,
porém, enquanto a margem é o espaçamento externo a partir da borda, o
preenchimento é o espaçamento interno a partir da borda. No exemplo a
seguir, vemos que as mesmas lógicas da margem também se aplicam.
p{ padding-top:100px;
padding-bottom: 100px;
padding-right: 150px;
padding-left: 80px; }

5.6 Text align

Text-align indica como o nome sugere o alinhamento do texto. Por
padrão, todo o texto é alinhado à esquerda, mas podemos centralizar ou alinhar
à direita por meio dessa configuração. Veja o exemplo a seguir: os elementos
h1, h2 e h3 estão respectivamente alinhados no centro, esquerda e direita:
h1{ text-align: center;}
h2{ text-align: left;} h3{
text-align: right;}
5.7 Estilização de texto
Para configurar a estilização de texto, existem diversos parâmetros que
podemos querer configurar, como a família da fonte, tamanho da fonte, estilo
itálico ou estilo oblíquo, negrito etc. No exemplo a seguir, demonstramos como
esses parâmetros são configurados:
p{
font-family: "Time New
Roman",'Times New Roman',
Times, serif; font-style:
italic; font-size: 30px;
font-weight: bold;
}
No exemplo anterior, vemos o comando que o atributo font-family
configura a família da fonte e seus parâmetros. Com font-style, configuramos o
estilo, que pode ser tanto itálico como oblíquo; font-size para configurar o
tamanho da fonte; font-weight, que dá a espessura das letras, no exemplo, bold
quer dizer negrito.

voltar
Aula 6 – Javascript CONVERSA INICIAL

Faremos uma introdução da linguagem de programação Javascript e sua

aplicação no desenvolvimento web. Vamos debater sua sintaxe e manipulação
de elementos HTML, seus principais comandos e também uma importante
linguagem de notação de objetos, chamada JSON.
Ao final desta etapa, esperamos atingir os seguintes objetivos que serão
avaliados da forma indicada.

Objetivos Avaliação

1 – Domínio sobre os principais comandos do Questionário e

questões
JavaScript
dissertativas

2 – Capacidade de gerar interações simples com Questionário e

usuário e elementos HTML de páginas web e questões
dissertativas
desenvolver pequenas soluções utilizando
Javascript

3 – Conhecimento prático e teórico sobre a função Questionário e

do Javascript no conceito de desenvolvimento web questões
dissertativas

TEMA 1 – HISTÓRIA DO JAVASCRIPT

Neste tópico, vamos contextualizar um pouco da história do Javascript

para melhor compreendermos a razão de existir e a relevância dele para o
desenvolvimento de páginas web.

voltar

1.1 História do JavaScript

O Javascript surgiu em 1995 e foi projetado pelo cientista da computação

Brendan Eich junto da equipe que desenvolveu o navegador Netscape, um
importante antecessor dos atuais navegadores Mozilla e Firefox. A linguagem
passou por diversos nomes, como Mocha e Livescript, até chegar no nome
Javascript.
 Importante observar que o nome Javascript não tem relação nenhuma
com a linguagem Java. Apesar da semelhança no nome, ela se dá apenas por
jogada de marketing da equipe de Brendan Eich que, aproveitando da
popularidade crescente da linguagem Java, escolheu batizar seu próprio
produto com um nome semelhante.
A adoção do Javascript pelo Netscape rapidamente solucionou diversos
problemas de navegação e se mostrou realmente revolucionária. A empresa
Microsoft, com o seu navegador Internet Explorer, rapidamente adaptou uma
versão própria do Javascript para si, chamada de JScript. Tanto o Netscape
quanto o Internet Explorer foram desenvolvidos baseados no mesmo código
fonte de um navegador chamado Mosaic. Portanto, adaptar o Javascript foi uma
tarefa relativamente rápida. As duas versões competiram por espaço no
mercado até 1997, quando uma versão padronizada do Javascript foi criada
para que os desenvolvedores não precisassem criar códigos páginas
específicas para cada navegador. A versão padronizada se chama ECMAScript
e é mantida pela empresa também chamada ECMA.
Quando falamos de Javascript, JScript e ECMAScript, estamos falando
da mesma linguagem; apenas o ECMAScript diz respeito ao padrão em si e as
outras duas são variantes da mesma linguagem que respeitam o padrão
enquanto introduzem pequenas modificações.

voltar

1.2 Para que serve o Javascript

Antes do Javascript, as páginas eram completamente estáticas. A única

forma de uma página web interagir e mudar qualquer coisa em seu conteúdo
para o usuário era por meio da comunicação com o servidor. Em meados da
década de 1990, as conexões domésticas geralmente se davam por linha
telefônica e modem de 28,8 kbps, muitas vezes mais lenta do que estamos
acostumados nos dias de hoje.
Nesse contexto, o Javascript surgiu como a primeira linguagem que atua
dentro do navegador do cliente, utilizando processamento local e permitindo
realizar pequenas tarefas que não precisam de informação nova do servidor,
diminuindo a necessidade de troca de informações apenas para o que for
absolutamente necessário, o que acarreta em uma grande vantagem para o
cliente, que terá uma navegação mais fluida e menos dependente da conexão –
e é bom para o servidor também, que receberá menos solicitações.
Para dar alguns exemplos práticos do que o Javascript é capaz de fazer,
segue alguns exemplos:

• clicar no botão “curtir” e a cor do botão mudar, sendo contabilizado um

pequeno contador soma um sem a necessidade de recarregar a página;
• menus que, ao serem clicados, apresentam submenus;
• páginas que carregam conteúdo extra automaticamente à medida que
fazemos a rolagem da barra;
• pequenas aplicações web como calculadoras, jogos etc.;
• validar se determinado parâmetro em um formulário foi preenchido; e
• alertas no formato pop-up.

Hoje, o Javascript é adotado em diversos outros contextos. Por exemplo,

o Node.Js, da Google, é a implementação do Javascript para ser executado fora
do navegador, e se tornou popular como linguagem para servidores de
aplicações web. Também é utilizada em um importante framework de
desenvolvimento de jogos chamado Unity.
No HTML5, o Javascript é completamente integrado ao HTML e
consegue muito facilmente acessar e manipular os elementos HTML da página.
Vamos discutir em maiores detalhes como fazer isso nos próximos tópicos desta
etapa.

TEMA 2 – CONFIGURAÇÕES

Vamos discutir três formas diferentes de colocar código Javascript no seu

HTML. A primeira forma é dentro da tag script, a segunda é por um arquivo
Javascript externo e, por fim, dentro de atributos especiais.

voltar

2.1 Tag script

Como já foi mencionado antes, o Javascript é complementar ao HTML5.

É uma parte integral dele. Portanto, não é necessário fazer uma instalação
externa, basta apenas criar a tag script e codificar códigos Javascript no
conteúdo da tag. Veja no exemplo abaixo como fica o código HTML com
Javascript para abrir um simples alerta com a mensagem: ‘Olá Mundo’.

<!DOCTYPE html>

<head>

<title>Título</title>

</head>

<body> <script> alert('Olá Mundo!');

</script>

</body>

</html>

O comando alert é responsável pela mensagem ser exibida em formato

de alerta pop-up.
Com relação à tag script, ela pode aparecer tanto como conteúdo da tag
head quanto da tag body. Pode também aparecer múltiplas vezes e será
executada sempre em ordem de cima para baixo. Como uma boa prática, é
melhor colocar sempre no final do body, pois muitas vezes os scripts interagem
com os elementos HTML da página, e como eles são carregados de cima para
baixo, se o script aparecer no fim é garantido que os elementos em questão já
terão sido devidamente carregados pelo navegador.

voltar

2.2 Arquivo externo

No entanto, é possível também separar o código Javascript em um

arquivo externo, o que é uma boa prática de desenvolvimento, pois permite uma
maior organização dos códigos, uma melhor divisão do trabalho de
desenvolvimento e também associar um mesmo arquivo Javascript com várias
páginas HTML distintas, diminuindo o eventual retrabalho.
 Para carregar um arquivo Javascript separado, basta no HTML utilizar o
atributo src dentro da tag script. O atributo src vem da expressão source, do
inglês origem, ou seja, qual a origem do arquivo que se deseja carregar, qual o

endereço dele relativo à página corrente. Veja no exemplo abaixo que o

arquivo script.js será carregado. A extensão .js é geralmente adotada para
representar códigos Javascript.

Página HTML

<!DOCTYPE html>

<head>

<title>Título</title>

</head>

<body>

<script src="script.js"> </script>

</body>

</html>
Arquivo script.js

alert('Ola Mundo!');

2.3 Propriedades especiais

Como uma terceira forma de carregar código javascript, é possível

também colocá-lo entre aspas dentro de certas propriedades especiais, como a
propriedade onclick, que quer dizer “ao clicar”. Essa propriedade se trata de um
evento que, como o nome sugere, acontece quando o elemento associado
recebe um clique e dispara o código associado. Confira o exemplo a seguir,
quando o botão recebe um clique e altera o conteúdo do parágrafo.

<body>
<p id="par1">Texto original do parágrafo.</p>
<button onclick=
"document.getElementById('par1').innerHTML='Texto novo'">
Clique Aqui!</button>
</body>

Note que entre aspas duplas está o código Javascript que irá alterar o
conteúdo do elemento HTML que possuir ID ‘par1’. Isso acontece pois o
comando document.getElementById seleciona elementos por sua ID e a
segunda parte do comando .innerHTML indica que o que se deseja manipular é
o conteúdo dentro da tag do elemento selecionado. Por fim, o =’Texto novo’ está
atribuindo um novo conteúdo para o elemento.

voltar

TEMA 3 – SINTAXE

Neste tópico, apresentamos uma introdução sobre como funciona o

código Javascript. Vamos discutir o conceito de variável e desvio de fluxo de
código. A ideia aqui é dar uma noção inicial de como essa lógica de
programação funciona no Javascript.
Para facilitar nossos testes, é conveniente utilizar o modo desenvolvedor
do navegador. Para o Google Chrome, por exemplo, basta apertar F12 no
teclado e buscar por uma aba chamada Console, conforme a figura a seguir:

Figura 1 – Modo desenvolvedor, aba console no Google Chrome

Com isso, conseguimos interagir com o console do navegador que está

executando o interpretador Javascript e escrever mensagens para testes e
controle, também chamados de log. Para isso, basta utilizar o comando
console.log conforme exemplo a seguir, que irá imprimir a mensagem “Bom dia”
no console.

console.log("Bom dia");
voltar
3.1 Variáveis

Um dos conceitos mais importantes em programação, e que também está

presente aqui, é de variável, um espaço de memória com um nome associado
no qual guardamos alguma informação. Por exemplo, para armazenar a
informação de um nome podemos criar uma variável e atribuir nela o valor que
desejarmos. Pode ser atribuído um valor diretamente ou extrair essa informação
de um formulário, por exemplo. Confira o exemplo a seguir:

var nome = "Mario";

console.log(nome); nome="Luigi";

console.log(nome);

Neste exemplo, criamos uma variável chamada nome, que recebe

inicialmente o valor “Mario”. Essa informação então é impressa no console, e
depois o valor da variável é alterado para “Luigi”; o valor antigo se perdeu, e
agora, quando a mesma variável é impressa novamente, vemos que o valor
novo será “Luigi”.
As variáveis podem tanto assumir o valor de textos, chamados de strings
no contexto de programação, quanto valores numéricos. No exemplo a seguir,
demonstramos isso por meio da variável idade.

var idade; idade=20; idade = idade+1;

console.log('Oi ' + nome + ' sua idade: ' + idade);

Inicialmente, a variável idade recebe o valor 20. E na sequência esse

valor é alterado para o valor original de idade (20) somado com 1, resultando
em 21, que será o valor impresso junto ao valor do nome no console.
Repare que no exemplo acima o símbolo + tem duas funções distintas:
realiza a soma de números e a concatenação de textos para imprimir.
Com relação às variáveis, repare que sempre colocamos a palavra
reservada var antes, para indicar que a palavra que se segue será nome de
uma variável. No entanto, existem outras duas formas mais modernas e
indicadas de fazermos a mesma coisa, que é utilizando as palavras let e const.
Elas funcionam de forma idêntica à var, exceto que const indica uma constante,
um tipo de variável cujo valor nunca se altera, e let, uma variável que pode sim
ser alterada. Por exemplo, você leu a informação do login do usuário, que não
deverá ser alterada ao longo da execução do código, então pode ser declarada
usando const. Agora, o total da compra vai ser modificado ao longo da
execução, então utilizamos let.
Veja no exemplo a seguir que a linha final irá gerar um erro no console,
pois estamos tentando modificar uma constante.

const login = "mario@super.com";

let total= 0; total= total+10;

login = "luigi@super.com";

3.2 Comando if

Além do conceito de variáveis e constantes, o conceito de fluxo de código

também é muito pertinente para a programação de forma geral: todo código que
escrevermos será executado em ordem, de cima para baixo, linha por linha.
Mas digamos que desejamos que uma determinada linha execute ou não,
dependendo de uma condição. Para isso temos o comando if, muito comum em
diversas linguagens de programação, e pode ser traduzido como SE, para criar
lógicas do tipo: “SE o valor de idade for menor que 18”, determinado bloco de
código será executado ou ignorado. Confira no exemplo a seguir esse uso:

var idade = 15; if(idade< 18){

console.log("Acesso bloqueado");

} console.log("Fim");

Nesse exemplo, caso a idade seja menor que 18, o código entre chaves
será executado; do contrário, ele será ignorado. Independentemente de ter
executado ou não o código associado entre chaves, o fluxo do código volta ao
normal e executa o comando que imprime “Fim” na tela.
 É possível também fazer um senão, e criar um bloco de código para
executar somente quando a condição associada ao if falhar. Fazemos isso
utilizando o comando else conforme o exemplo abaixo.
var idade = 15; if(idade< 18){

console.log("Acesso bloqueado");

} else{ console.log("Acesso

liberado");

} console.log("Fim");

Perceba no exemplo que o else não requer nenhuma lógica associada a

ele, e deve sempre vir imediatamente seguido do bloco do if.

voltar

3.3 Comando while

Outro comando de muita importância para a lógica de programação é o

while, também presente aqui no javascript. Ele é responsável pela repetição de
blocos de códigos. Do inglês while, quer dizer enquanto, e ele tem exatamente
essa funcionalidade: enquanto a condição associada for verdadeira, o bloco de
código será executado. Confira o exemplo:

var quantidadePessoas = 5;

while(quantidadePessoas >0){ console.log("Bom

dia!"); quantidadePessoas= quantidadePessoas-1;

}
 Nesse exemplo, “Bom dia!” será impresso na tela enquanto o valor da
variável quantidadePessoas for maior do que zero. Repare que o código
associado fará duas coisas: primeiro imprimir a mensagem “Bom dia”, e
segunda, diminuir o valor da quantidadePessoas em 1. Então o código vai
executar 5 vezes nesse momento quantidadePessoas vai passar a valer 0, a
condição associada ao while será falsa e fluxo do código irá continuar.
Temos possibilidades ilimitadas para criar lógicas muito complexas e
elaboradas, e o objetivo aqui foi dar uma pequena amostra disso.

voltar

3.4 Função

Outro conceito muito importante dentro da lógica de programação é a

função. Basicamente, consiste em você dar um nome para um bloco de código.
Assim como a variável é um apelido para um espaço de memória com um valor,
a função é um “apelido” para um bloco de código. Sempre que chamamos
determinada função pelo seu nome ou “apelido”, a função associada é
executada. Confira o exemplo a seguir: a função necessita da palavra reservada
function, em seguida deve vir o nome da função, depois abre e fecha
parênteses para eventuais parâmetros e por fim abre e fecha chaves com o
bloco de código associado.
console.log("Seja bem vindo Mario");

cumprimentos(); console.log("Seja

bem vindo Luigi"); cumprimentos();

function cumprimentos(){

console.log("Bom dia");

console.log("Boa tarde");

console.log("Boa noite");

No exemplo, a função chamada cumprimentos está associada ao bloco

de código que imprime “Bom dia”, “Boa tarde” e “Boa noite”. E sempre que
escrevermos “cumprimentos()”, o código será executado, o que é uma facilidade
para quando desejamos repetir muitas vezes um mesmo bloco de código sem a
necessidade de repetir toda sua digitação.
É possível também passar parâmetros para a função. Nesse caso, o
bloco de código o executará baseado no valor determinada variável passada
por parâmetro. No exemplo a seguir, a idade está sendo passada como
parâmetro para a função acesso, e dependendo do valor da variável idade uma
mensagem diferente irá aparecer no console.

acesso(17); function acesso(idade){

if(idade<18){

console.log("Acesso bloqueado");

} else{

console.log("Acesso liberado");
voltar

3.5 Lista

Mais um conceito de grande importância na programação são as listas.

Como o nome sugere, serve para listar itens de forma ordenada. Digamos que
seja interessante armazenar o nome de várias cidades em uma única variável.
É possível fazer isso por meio das listas, conforme o exemplo a seguir:
var capitaisSul = ["Curitiba", "Florianópolis",
"Porto Alegre"]; console.log([capitaisSul[0]]);
console.log([capitaisSul[1]]);
console.log([capitaisSul[2]]);

Conforme o exemplo dado, uma lista chamada capitaisSul foi criada e

nela temos três itens. A lista é criada utilizando o colchetes, e cada item é
separado por vírgula. Para acessar os itens posteriormente, seja para modificá-
los ou ler o seu conteúdo, basta colocar entre colchetes a posição deles
iniciando por zero.
No exemplo dado, “Curitiba” está na posição 0, “Florianópolis” na posição 1 e
“Porto Alegre” na posição 2.
voltar

TEMA 4 – PRINCIPAIS COMANDOS

Neste tópico, vamos discutir como fazemos para o Javascript interagir

com os elementos HTML da página. Vamos discutir um tipo especial de lógica
que existe dentro do Javascript, chamada de evento.
Para apresentar esse conceito de evento, vamos partir de um exemplo
prático primeiro e na sequência destrincharemos em maiores detalhes o que
está acontecendo. O código abaixo irá adicionar um evento de “clique” ao
parágrafo de id #para, ou seja, no momento que o parágrafo em questão
receber um clique, ele irá executar a função que altera seu conteúdo.

<p>Parágrafo com texto 1.</p>

<p id="para">Parágrafo com texto 2.</p>
<script> let paragrafo =
document.querySelector("#para");
paragrafo.addEventListener('click',trocaTexto);
function trocaTexto(){
paragrafo.innerHTML="conteudo novo";
}
</script>

No começo do código, vemos a criação de alguns parágrafos, sendo que

um deles possui a id #para. Na sequência, temos o trecho Javascript que
começa criando uma variável chamada paragrafo, que recebe o conteúdo da
função document.querySelector(“#para”); Essa função irá selecionar o elemento
HTML que possua o primeiro resultado compatível com o parâmetro (no caso
#para), ou seja, aqui no exemplo, o parágrafo com aquela id.
Na sequência, estamos adicionando um gerenciador de eventos para o
parágrafo, mas que tipo de evento? Aquele passado por parâmetro, no caso, um
evento de clique. Ou seja, sempre que o parágrafo receber um clique irá
executar a função passada por parâmetro. E a função associada é a trocaTexto,
que irá modificar o conteúdo do parágrafo.
Existem diversos outros eventos que podemos configurar além do clique.
Para dar alguns exemplos, vemos o que se segue.

• change: quando o elemento HTML recebe alguma alteração.

• mouseover: quando o cursor do mouse passa sobre o elemento.
• mouseout: quando o cursor do mouse sai de sobre o elemento.
• load: quando o navegador termina de carregar o elemento HTML.
• keydown: quando o usuário pressiona uma tecla em seu teclado.

voltar
TEMA 5 – JSON

Neste tópico, vamos discutir o JSON, JavaScript Object Notation, que,

traduzido, quer dizer notação de objetos do JavaScript. Essa notação de objetos
é a forma JavaScript de descrever e organizar dados e facilitar seu acesso,
permitindo colocar as informações com que estamos trabalhando em um
formato de texto que seja facilmente compartilhável. Confira o exemplo a seguir:
let pessoa = {"nome":"Mario", "idade":31,
"pais":"Italia"};
pessoa.nome;
pessoa["nome"];

A notação do JSON é bastante simples. Conforme o exemplo, estamos

descrevendo uma pessoa, e essa pessoa tem três atributos associados a ela:
nome, idade e país de origem. O objeto em si fica entre chaves e cada atributo
é separado por vírgula. Cada atributo é composto pela sua chave, que é o nome
do atributo e o valor desse atributo. No exemplo anterior, as chaves são: nome,
idade e país, e seus respectivos valores “Mario”, 31, ”Italia”.
Note no exemplo acima que, para acessar um atributo de um objeto,
basta colocar o nome do objeto seguido do ponto e o nome do atributo
desejado, ou entre colchetes a string com o nome do atributo.
Para cada objeto, é possível criar quantos atributos se queira e o valor
dos atributos pode ser tanto uma string, um número, lista ou até mesmo um
outro objeto. A seguir, um exemplo de um objeto mais elaborado.

empresa = {
"chefe":{ "nome": "Shao", "sobrenome": "Kahn" },
"funcionarios": [
{ "nome": "Liu", "sobrenome": "Kang" },
{ "nome": "Sonya", "sobrenome": "Blade" },
{ "nome": "Kung", "sobrenome": "Lao" }]
};

No exemplo acima, temos um objeto chamado empresa que possui dois

atributos, chefe e funcionários, O atributo chefe é um objeto em si, enquanto
funcionarios é uma lista composta por três objetos. Cada um desses objetos
internos da empresa possui os atributos nome e sobrenome. Se quisermos
acessar o sobrenome do segundo funcionário da empresa, ficaria:

empresa.funcionarios[1].sobrenome
 Da empresa, estamos acessando a lista funcionários na posição 1
(lembrando que os índices começam pelo zero), e desse funcionário na posição
1 estamos acessando o sobrenome.

voltar

5.1 XML

Outra linguagem de notação de objetos, concorrente ao JSON, é o

chamado XML. Ele funciona de forma parecida com o HTML, por tags, em que o
atributo vira nome da tag e o valor é o conteúdo da tag. Confira o exemplo
abaixo.

<pessoa>
<nome>
"Mario"
</nome>
<idade>
31
</idade>
</pessoa>

Tanto o XML quanto o JSON são bastante populares hoje. No entanto, vemos a
tendência do XML, que surgiu primeiro, perder espaço para o JSON por esta
ser uma notação mais simples de descrever e por conter menos texto, o que
acaba sendo mais rápido de transmitir pela rede. voltar

voltar

TEMA 5 – apols

O html é uma linguagem interpretada, pois não precisa de um executável

para funcionar, basta abrir no navegados.
C++ é uma linguagem compilada, vai gerar um exe.
APOL 2 – OBJETIVA (AULAS 4, 5 E 6)
Errei a questão 2, a certa é letra c (I e II apenas)
Prova prática
 voltar
TEMA 6 –Exercícios aula prática:

AULA 4 - HTML
HTML (aula 4>Comandos HTML)
Dá pra fazer em qualquer editor de texto
Visual Studio Code: editor de texto planejado para o desenvolvimento de
códigos, que tem uma série de facilidades.
Instalar duas coisas: (instalar extensões que a própria Microsoft cria ou
outros desenvolvedores) como a Live Server (lança na página do navegador
com as mudanças em tempo real) e em Manage>Settings marcar o Auto
save>afterDelay (para salvamento automático de mudanças depois de um
intervalo)
File>Open Folder
Criar uma pasta “meuSite”
Seleciona ela
Clica em “new File” e dá um nome pro arquivo usando sempre .html pra
identificar que se trata de um arquivo html
O arquivo abrirá no navegador quando clicar duas vezes nele
Começar sempre com <!DOCTYPE html> que indica as regras de qual
versão do html que está usando (se não colocar nº, indica que é a última
versão
Depois coloca a tag (marcação) <html>

</html> que indica onde efetivamente o documento começa e termina

O html é dividido em duas partes, cabeçalho (head) e corpo (body) que

vão entre a tag <html> inicial e a final)
Dentro da head tem o título da página e alguns conteúdos que dizem
respeito à página como um todo.
<title></title> é o título do site, na aba do navegador
Depois vem o body, que contém os h (títulos e subtítulos) e p
(parágrafos)
<h1> </h1> Título da página, dentro do documento: em inglês: heading
<h2></h2> para subtítulo ( vai até h6)
Parágrafo: tag <p> </p> (início e fim do parágrafo)
Se não colocar o texto nos parágrafos, ele vai colocar todas as frases
juntas sem formatação nenhuma.
Quebra de linha: <br> (quebra de linha – line break)
Comentário: <!- -na sequencia vem o trecho da imagem- -> (comentário,
que não vai aparecer na página, é apenas para quem está vendo os códigos)

!DOCTYPE html>
<html>
<head>
<title>Titulo do meu site</title>
 </head>
<body>
<h1>Título da página</h1>
<h2>TÍTULO</h2>
<H3>TÍTULO</H3>
<H4>TÍTULO</H4>
<H5>TÍTULO</H5>
<H6>TÍTULO</H6>
<P>PARÁGRAFO COM TEXTO 1</P>
<p>PARÁGRAFO COM TEXTO 2</p>
<BR></BR>
<P>PARÁGRAFO COM TEXTO 3</P>
<BR></BR>

<p> Lorem ipsum

Pra criar um texto de teste, é só escrever <p>Lorem</p> que ele já

insere automaticamente um parágrafo de texto que não tem sentido. Se quiser
mais palavras no parágrafo, coloca um nº depois de Lorem, por exemplo
Lorem200
Arquivo de imagem: não precisa colocar fim, só <img src=”logo.jpg”
alt=”logo da Uninter” width=”128”
(src é source=origem; é a propriedade da imagem) alt é a descrição da
imagem; width é o tamanho da imagem
Elemento vazio
Nem todos os elementos possuem conteúdo, e esses que não possuem são
chamados de elementos vazios. Um exemplo importante é o elemento <img>, que é
utilizado para colocar uma imagem na página

Exercício prático da aula 4:

Abre o Visual studio code (VSC)

 Clica em New file para criar a nova página
Nomeia
Digita dentro dela:
html:5
e clica em TAB ou Enter (o VSC vai gerar automaticamente a página)

Vamos criar um formulário de cadastro como nome de “Pedido Pizza”:

<body>
<h1>Pedido Pizza</h1> (h1 é Título)
Criar um formulário (TAG form)
Dentro de form, tem dois parâmetros a escolher:
1. method com as opções Get (formulário de busca), Post (formulário de
cadastro) e outras;
1.1) Get: como é o modo de busca, ele vai colar na barra de pesquisa
TODOS os dados inseridos no formulário, o que pode não ser
interessante nem permitido a divulgação desses dados, em
determinados casos, como mostra na figura abaixo:

1.2) Post: nesse caso ele vai mandar os atributos, as informações irão
para o destino, só que sem mostrar as informações no link de acesso:

2. Action (qual o destino desses dados coletados, ou seja, a página que vai
fazer o processamento desses dados).

No caso do exercício proposto, o local, o método a ser utilizado é

o “get” e a action é “teste.jsp”: a página (fictícia) pra onde vão os dados
coletados se chama teste.jsp, então vamos completar com ele:
 Agora que já temos o corpo (atributos) do formulário criado, vamos criar
os elementos dele:
Os elementos pedidos são: radio, select, checkbox, text, date, email,
textarea, submit.
Text – é uma caixa de texto;
Radio – são opções;
Select – cria uma caixa de seleção com várias opções de escolha. O
select não usa o input antes;
Checkbox- diferente da radio, a checkbox serve para que seja possível
marcar um ou mais itens;
Email – é uma caixa de texto também, porém ela requer que o texto
contenha @;
Data- cria uma caixa com um calendário para marcação da data;
Textarea- cria um campo de texto maior do que uma linha apenas;
Submit- inclui o botão Enviar para o campo de texto Textarea.

1. Entrada tipo texto:

Dentro do formulário, cada entrada se chama input:
<input type=”text” (entrada do tipo texto) name=”nome” (name quer
dizer como vamos chamar o campo de texto, no caso um atributo chamado
“nome”)

2. Entrada tipo radio:

 Como demos o mesmo name para o input Tamanho, que se chama
name=“Tamanho” em todas as três opções, ele entende que se trata do mesmo
grupo.
Por padrão, quando a página é carregada no navegador, nenhuma das 3
opções vem marcada, conforme mostra na imagem acima. Mas podemos
deixar uma delas já marcada por padrão, acrescentando a palavra checked:

3. Entrada tipo Seleção:

Abre uma caixa de seleção com várias opções de escolha. O
select não usa o input antes;
Por exemplo, para escolher os sabores da pizza:
4. Checkbox:

5. Email:

6. Data:

7. Textarea e submit:

Resultado final:
 Exercício 2:
Antes de fazer o exercício, vamos criar uma tabela com dados para ver como é:

Abre o Visual studio code (VSC)

Clica em New file para criar a nova página
Nomeia, sempre lembrando de colocar .html depois do nome
Digita dentro dela:
html:5
e clica em TAB ou Enter (o VSC vai gerar automaticamente a página)
Para criar a tabela, começa com table (tabela), e inclui uma borda, onde
o nº depois da borda indica a espessura da linha externa:
<table border=1>
Depois costuma-se colocar um Título para a tabela:
<caption>Economia mensal</caption>
A seguir, começa com a 1ª linha: <tr></tr> (table row = linha da tabela)
Depois, as colunas, que na verdade se fala elementos, com seus títulos
também: <th></th> (table heads= cabeçalho da tabela)
E por fim, incluímos os dados dentro das células:
<td></td> (table data=dados da tabela)
 Agora, vamos fazer o exercício, que nos pede:

Clica em New file para criar a nova página

Nomeia, sempre lembrando de colocar .html depois do nome
Digita dentro dela:
html:5
e clica em TAB ou Enter (o VSC vai gerar automaticamente a página)
Para criar a tabela, começa com table (tabela), e inclui uma borda, onde
o nº depois da borda indica a espessura da linha externa:
<table border=1>
A tabela deve ter 3 linhas:
<tr>
</tr>
 <tr>
</tr>
<tr>
</tr>
A primeira linha tem uma coluna só, e espaço em branco. Para criar esse
espaço em branco, utiliza-se a notação &nbsp; que no html irá criar espaço
(&NonBreakingSpace;)

e repete ele para aumentar o espaço.

E para que as colunas fiquem espaçadas adequadamente, temos que
usar o parâmetro colspan dentro da td, dando a ele um tamanho múltiplo de 10,
que é porque o html não aceita número quebrado como o 1,5:

Exercício 3:

Baixar algumas imagens para usar no exercício; (tava com preguiça de

procurar imagens então substituí por robô e flor)
VSC: criar uma página por ex “tabelaAnimais.html (File>Newfile)
 Html:5 (criando os parâmetros principais...)
Abrir a página no navegador:
Explorer>meusite> botão direito em tabelaAnimais.html > Open with live
server
Links: link é a tag a, e que precisa obrigatoriamente do parâmetro
href=””
Esse link vai apontar para uma página externa, página local interna ou
outra

e já aparece o link na página.

Clicando nele será direcionado para a página do google

Para fazer um link que é uma imagem:

Coloca o link para a página desejada, e no lugar de escrever uma
palavra ou frase pra ser o link, adiciona uma imagem que está salva (criar uma
pasta no VSC, nomear como imagens, e salvar as imagens que quer usar ali)
ou de um link na internet (nesse caso colocando o endereço dela na web).
O link pra ela fica: <img src=”imagens/nomedaimagem” width= 200
Para criar a tabela:
<table> (tabela)
<tr> (linha)
<th>Gatos</th> (título da coluna)
<th>Cachorros</th>
</tr>
<tr>
<td> (célula)
<td/>
<tr/>
</table>
Para adicionar linhas na tabela, é só repetir os mesmos comandos.
Exercício 4:
 A página agrega coisas já feitas antes, como colocar título na página,
inserir uma imagem, um parágrafo de texto e links:
VSC: criar uma página por ex “Mario.html” (File>Newfile)
Html:5 (criando os parâmetros principais...)
Abrir a página no navegador:
Explorer>meusite> botão direito em Mario.html > Open with live server
O html é dividido em duas partes, cabeçalho (head) e corpo (body) que
vão entre a tag <html> inicial e a final)
Dentro da head tem o título da página e alguns conteúdos que dizem
respeito à página como um todo.
<title></title> é o título do site, na aba do navegador:
<title>Mario</title>

Depois vem o body, que contém os h (títulos e subtítulos)

<h1> </h1> Título da página, dentro do documento: em inglês: heading
<h1>Sobre </h1>
 ... e p (parágrafos):
<p><b>Mario Bros</b> é um dos personagens mais <i>queridos</i> do
mundo dos games, criado em 1980

<b>coloca algo em negrito</b>

<i> coloca algo em itálico</i>

Link:
<a href="http://www.twitter.com">Twitter</a>

E coisas novas, como uma lista de itens e subitens:

<ul>
<li><b>Nintendo</b>
<ul>
<li>Super Mario Bros</li>
<li>Super Mario Bros II</li>
</ul>
</li>
<li>Nintendo
<ul>
<li>Super Mario Bros</li>
<li>Super Mario Bros II</li>
</ul>
</li>
</ul>

<ul>cria uma lista sem numeração</ul>

<li>são os itens da lista</li>

Se quiser uma lista com itens numerados, usa :

<ol></ol>
 Resultado Final:

-----------------------------------------------------
----------------------
AULA 5 – CSS
CSS – Cascating Style Sheets (folhas de estilo em cascata)

Pra começar a usar o CSS, dentro de uma página html, colocamos a

TAG style dentro de qualquer parte dela, mas é mais comum colocar na parte
Head: <style></style>
 Abrindo o VSC: aproveitando a página do Mario criada anteriormente,
vamos alterar os títulos (h1) para a cor azul e o background para roxo:

Resultado final:

Seletores CSS:
Para definir o estilo, selecionamos o elemento desejado (h1 (título), p
(parágrafo), etc)

Class
 Podemos trabalhar por meio das class (Classes) dando um nome pra ela
(exemplo: <h1 class=”supertitulo”>Meu título</h1>, e tudo o que se referir a
essa classe vai ficar na formatação indicada na class. Pra criar a referência, é
só escrever
.supertitulo{}
dentro de style.
No exemplo abaixo, o elemento título obedece às instruções da classe
supertítulo pra ficar com a cor azul e com o tamanho 50px, instrução essa que
se sobrepões à anterior, na linha acima, de que o tamanho fosse 12px: isso
acontece porque o elemento sempre vai obedecer ao que for mais específico,
ou seja, no caso do exemplo, o elemento é um h1 como talvez outros h1 dentro
da mesma página, porém, ele é um h1 da classe supertítulo, então ele vai
assumir a formatação dos supertítulos, que terão precedência.

ID
ID é uma identificação ( exemplo:“id=”tituloprincipal”) e será ainda mais
específica que a class.
No exemplo abaixo, os h1 seriam azuis de tamanho 12px, mas na class
foi especificado um tamanho de 50; e a ID tituloprincipal determinou que o
tamanho é 90px e a cor crimson.
A precedência será sempre do mais específico.
 Caso venha na mesma ordem de importância, vale o que vier depois:

No exemplo acima, a especificação de parágrafo de cor rosa veio depois

da verde, fica valendo a rosa.
Pode-se colocar múltiplas especificações para seletores diferentes,
através de vírgula:

No exemplo acima, tanto h1 como p serão azuis e de tamanho 12px.

Pode-se também combinar várias coisas ao mesmo tempo, por exemplo,

dar a instrução para todos os h1 que fazem parte da class supertitulo, ou seja,
que também são supertitulo, usando: h1.supertitulo:

Podemos também especificar em listas, para trocar a cor dos itens da

lista, por exemplo:
.minhalista li (é como se li fosse filho de minha lista) e vai obedecer a
instrução dela.
 Pode haver múltiplas classes e onde couber, vai alinhando as instruções.
Por exemplo, h1 é da classe supertitulo e também da central:

No exemplo acima, .central foi alinhado no centro da página, o que

aconteceu com Meu Título, como se vê na página do navegador. Assim, tudo o
que fizer parte ele vai alinhando, encaixando em efeito cascata. E o que
acontecer em sobreposição, ele vai seguir a ordem de prioridade.
Ordem da cascata de estilo
Pode-se escrever os estilos css em arquivos separados:
No VSC, criar um novo file chamado estilo.css
Seleciona todo o código já escrito na página html, entre as TAGs <style>
(sem incluir a tag) recorta e cola na página #estilo.css
Pra conectar o estilo à página, cria-se um link na página html, indicando
onde está o estilo a seguir, através da TAG <link rel=”stylesheet”
href=”estilo.css”> (link relacionado à folha de estilo da página “estilo.css”):
 Toda página que eu quiser que tenha essa mesma formatação de estilo,
é só copiar o mesmo link nela. Pode ser criada até uma pastinha só com folhas
de estilos, para utilização variada.
E se tiver um link para uma folha de estilos, e eu quiser fazer um estilo
específico dentro da página, é só criar a Tag <style> dentro da própria página,
abaixo do link – pela ordem, o de baixo vai ser obedecido.

Se quiser, também pode ditar o estilo dentro da própria tag. Nesse caso,
pela ordem, é obedecido o que foi dito internamente:

Porém, o recomendado é deixar o css para essas orientações de estilo,

em arquivo externo, e não junto do arquivo html.

Principais comandos CSS

CORES
 As cores no CSS são utilizadas em diversos comandos distintos e existem três
formas de representá-las, conforme a lista a seguir.
● Nome das cores em inglês: existe uma lista vasta de nomes de cores em inglês
que é reconhecida pelo CSS que internamente substitui por uma cor predefinida, é
uma representação muito útil para realizar testes rápidos e tornar o código facilmente
legível. Importante notar que não é sensível a maiúsculas e minúsculas, red, Red ou
RED vão representar a cor vermelha da mesma forma.
● Valor RGB: a sigla RGB vem das palavras red, green, blue (vermelho, verde,
azul) e diz respeito à combinação dessas cores. O padrão RGB é muito famoso e
utilizado em diversos outros contextos, especialmente digitais. Quando combinadas,
essas três cores-base podem gerar qualquer outra cor do espectro visível, pois a ideia é
que cada canal de cor seja representada por um entre 0 e 255 (ou seja, 1 byte para
cada canal de cor), e é representado sempre na ordem vermelho, verde e azul; então,
por exemplo: RGB (255,105,0) é uma cor que combina 100% de vermelho – por isso o
255, um pouco acima dos 40% de verde – por isso 105, e nada de azul – por isso o valor
0 no fim, o que dá uma cor alaranjada.
● Valor hexadecimal: essa representação é igual a RGB, porém, um pouco mais
compacta, em vez de utilizarmos números decimais, utilizamos hexadecimal 2 dígitos
para cada canal de cor com uma cerquilha na frente e todos os valores juntos, por
exemplo: #00ff00 é igual a RGB (0,255,0), que representa a cor verde.
5.2 Background-color
O background-color é um atributo que modifica a cor de fundo do elemento,
por exemplo:
body{background-color: lightblue;}
body{background-color: rgb(173,216,230);}
body{background-color: #add8e6;}
Os exemplos anteriores são três formas distintas de colocar a cor azul clara no
fundo de todo o corpo da página.

IMAGENS
5.3 Background-image
O background-image é o atributo para colocar uma imagem de fundo nos
elementos selecionados. Veja no exemplo a seguir que é necessário colocar, no
entanto, o endereço relativo do arquivo contendo a imagem dentro dos parênteses
comando url(). Caso o elemento seja maior do que a imagem, ela, por padrão, irá se
repetir vertical e horizontalmente. Com a propriedade background-repeat, é possível
configurar esse comportamento para que a imagem não se repita ou seja repetida
apenas em um eixo. Os valores para o atributo são: no-repeat, repeat-x ou repeat-y.
Respectivamente não repete, repete no eixo horizontal, repete no eixo vertical.

No exemplo, a imagem gatinhos.jpg, que está localizada na pasta imgs, será

adicionada ao fundo do corpo da página e, caso a página seja mais larga do que a
imagem, ela será repetida horizontalmente, mas não verticalmente.

MARGEM
5.4 margin
A margem é como chamamos o espaço que fica em volta da borda do elemento
HTML, e é possível configurar quanto de espaço vazio desejamos que exista em torno
daquele elemento. Confira no exemplo a seguir os atributos margin-top, margin-
bottom, margin-right e margin-left, respectivamente a quantidade de pixels que terá
de espaço no topo, fundo, direita e esquerda:

Existem formas mais simplificadas de descrever o tamanho das margens. Caso

apenas com o atributo margin seja fornecido com um único valor, ele vale para todos
os lados. Se dois valores forem dados, o primeiro irá para as margens verticais e o
segundo para as horizontais. E, caso quatro valores sejam dados, daí serão aplicados
para as margens superior, direita, inferior e esquerda, nessa ordem.
5.5 Padding
O conceito de padding, preenchimento, é semelhante ao da margem, porém,
enquanto a margem é o espaçamento externo a partir da borda, o preenchimento é o
espaçamento interno a partir da borda. No exemplo a seguir, vemos que as mesmas
lógicas da margem também se aplicam.
 5.6 Text align
Text-align indica como o nome sugere o alinhamento do texto. Por padrão, todo
o texto é alinhado à esquerda, mas podemos centralizar ou alinhar à direita por meio
dessa configuração. Veja o exemplo a seguir: os elementos h1, h2 e h3 estão
respectivamente alinhados no centro, esquerda e direita:

5.7 Estilização de texto

Para configurar a estilização de texto, existem diversos parâmetros que podemos
querer configurar, como a família da fonte, tamanho da fonte, estilo itálico ou estilo
oblíquo, negrito etc. No exemplo a seguir, demonstramos como esses parâmetros são
configurados:

No exemplo anterior, vemos o comando que o atributo font-family configura a

família da fonte e seus parâmetros. Com font-style, configuramos o estilo, que pode ser
tanto itálico como oblíquo; font-size para configurar o tamanho da fonte; font-weight,
que dá a espessura das letras, no exemplo, bold quer dizer negrito.

A tag div não possui nenhum efeito sozinha no html, ela serve para gerar
divisões lógicas para situações como essa, em que se deseja separar alguns elementos de
outros e dar comportamento específico para ele por meio de código css ou Javascript
associados. A tag span possui a mesma finalidade – geralmente, div são blocos maiores
e span para blocos menores de uma única linha.

FINALIZANDO
Aqui, discutimos os principais conceitos envolvendo o CSS, suas aplicações e
primeiros exemplos, bem como, em maiores detalhes, sua sintaxe, o seletor e algumas
das principais propriedades que podemos manipular por intermédio do CSS.

Acessar o site W3SCHOOLS pra ver muitos outros comandos

 Exercício 1
- Faça uma página na qual existam quadrados de cores distintas
ocupando os quatro cantos da tela com um texto dentro.
VSC: cria uma página html
Cria um div e uma classe pra ele: (aula 5 - 3.3 Seletor por classe e vídeo
5-4 seletor, no minuto 1:30)
Class=quadrado
Criar uma página de estilo (vídeo 5-5 min 2)
Criar um link pra ela
Widht (largura)
Height (altura)
Position: Absolute (fixa a imagem nessa posição)
 Exercício 2
Crie uma imagem com um link que tenha comportamentos diferentes
quando selecionado e quando o cursos está sobre a imagem.
Criar a página (Aula5exercicio2.html)
Criar a folha de estilo (estilos/aula5exercicio2.css)
Criar o link entre elas: <link rel=”stylesheet” href=”estilos/
aula5exercicio2.css”
Criar o link para a imagem: <img class = "imagem" src="imagens/Mario
bros.webp"
A classe sempre entra depois do elemento, no caso acima, o elemento é
<img
A classe é class = “imagem”
Comportamento diferente: vamos fazer com que a imagem se mova para
a cima e para baixo, quando passarmos o mouse por cima dela:
Para isso, usamos de novo a class .imagem e acrescentamos os dois
pontos e mais a ação que queremos, dentre as opções existentes:

Hover (sobrevoar)
 Vai mexer de 0 a 50 px

Aula 6 – Javascript
Assim como a folha de estilo, o javaScript também pode ficar em um
local separado, e ser compartilhado.
Podemos ter diversas <script>
Tanto <head> quanto <body>
Executam na ordem em que aparecem
Uma boa prática é colocar no final do código para evitar lentidão.
Para referenciar a página onde ele está, escrever a Tag:
<script src=”script.js”></script>

Depois cria a página JavaScript e coloca o código ali, que já vai aparecer
na página automaticamente.

SINTAXE
 String são informações de texto, colocadas entre aspas.
Var é a variável .

Const é uma informação que não vai ser modificada.

Let é uma informação que vai ser modificada.
+ concatena duas informações.

Pode usar a crase para colocar informações também, e o sinal de $ { }

If quer dizer “se” e else “senão”

Se não quiser apagar um código, mas não quiser que ele seja executado
no momento, coloca ele entre /* */ e ele fica como se fosse um comentário.
 Typeof é uma função que indica o tipo de variável (string, number,
boolean = true or false)

Não pode cirar uma variável com esses nomes reservados no parêntese
acima, nem começando com número

JSON

Criar listas (array):

 TEMA 5 – JSON
Neste tópico, vamos discutir o JSON, JavaScript Object Notation, que,
traduzido, quer dizer notação de objetos do JavaScript. Essa notação de objetos é a
forma JavaScript de descrever e organizar dados e facilitar seu acesso, permitindo
colocar as informações com que estamos trabalhando em um formato de texto que seja
facilmente compartilhável. Confira o exemplo a seguir:
let pessoa = {"nome":"Mario", "idade":31,
"pais":"Italia"}; pessoa.nome; pessoa["nome"];
A notação do JSON é bastante simples. Conforme o exemplo, estamos
descrevendo uma pessoa, e essa pessoa tem três atributos associados a ela: nome, idade
e país de origem. O objeto em si fica entre chaves e cada atributo é separado por
vírgula. Cada atributo é composto pela sua chave, que é o nome do atributo e o valor
desse atributo. No exemplo anterior, as chaves são: nome, idade e país, e seus
respectivos valores “Mario”, 31, ”Italia”.
Note no exemplo acima que, para acessar um atributo de um objeto, basta
colocar o nome do objeto seguido do ponto e o nome do atributo desejado, ou entre
colchetes a string com o nome do atributo.
Para cada objeto, é possível criar quantos atributos se queira e o valor dos
atributos pode ser tanto uma string, um número, lista ou até mesmo um outro objeto. A
seguir, um exemplo de um objeto mais elaborado.
empresa = {
"chefe":{ "nome": "Shao", "sobrenome": "Kahn"
},
"funcionarios": [
"sobrenome":
{ "nome": "Liu",
"Kang" },
{ "nome": "Sonya",
"sobrenome": "Blade" },
"sobrenome":
{ "nome": "Kung",
"Lao" }]
};
No exemplo acima, temos um objeto chamado empresa que possui dois
atributos, chefe e funcionários, O atributo chefe é um objeto em si, enquanto
funcionarios é uma lista composta por três objetos. Cada um desses objetos internos da
empresa possui os atributos nome e sobrenome. Se quisermos acessar o sobrenome do
segundo funcionário da empresa, ficaria:
empresa.funcionarios[1].sobrenome
 Da empresa, estamos acessando a lista funcionários na posição 1 (lembrando que
os índices começam pelo zero), e desse funcionário na posição 1 estamos acessando o
sobrenome.

Exercício 1
segue no quadro de baixo:
!= diferente
‘‘ vazio
 && e

voltar

TEMA 7 – Prova Discursiva – questões pra estudar:

1. Definição de HTML?
HTML: HyperText Markup Language, é uma linguagem de marcação de
hipertexto, que é utilizada na construção de páginas da web.
2. Definição de WWW
WWW: world wide web, quer dizer rede mundial de computadores, e é
um sistema que serve para acessar informações em páginas (sites) e
compartilhá-las. Para acessá-las é preciso saber o seu endereço web.
3. Definição de internet verde:
A internet verde quer dizer uma forma mais sustentável de utilizar as
tecnologias, são uma série de iniciativas que visam diminuir resíduos
eletrônicos e estimular a reutilização deles, poupar energia, diminuir o
uso de papel, etc.

4. Definir uma variável em JavaScript

Para definir uma variável em JavaScript utilizamos uma variável
chamada “nome” e antes dela, as palavras-chaves var, let ou const.
Substitui-se a palavra nome pelo valor, e essa informação será impressa
no console. Quando mudamos o valor, a nova informação será
impressa.

5. Criar duas Tags HTML e dizer para que servem

<title>Título</title> serve para criar um título na aba do navegador
<p>parágrafo com texto</p> serve para criar um parágrafo com
texto.

6. Citar dois browsers e o que eles são:

O browser é um tipo de software aplicativo, que realiza tarefas
específicas, no caso um navegador, ou seja, um programa utilizado para
navegar na internet, acessar os sites e todo o conteúdo online.
Microsoft Edge e Google Chrome estão entre os mais conhecidos.
voltar
Questões da prova objetiva

1. O ciclo de vida de um software contém três fases genéricas:

Definição – Desenvolvimento - Manutenção
Considerando o ciclo de vida de software apresentado acima e o conteúdo visto
em aula, são feitas as seguintes afirmações:

I – A fase de definição: nesta fase ocorre o levantamento de requisitos

II – A fase de desenvolvimento: nesta fase ocorre a análise de sistemas
III – Manutenção: são feitos ajustes e caso algum módulo necessite de
alteração ou modificação, isto é feito.
Estão corretas apenas:
A–I
B – I e II
C – II e III
D – I e III
E – I, II e III
O ciclo de vida de um software é uma estrutura que indica processos e
atividades envolvidas no desenvolvimento, operação e manutenção de um
software, abrangendo de fato toda a vida do sistema. Neste ciclo, existem
modelos que definem como o software será desenvolvido, lançado, aprimorado
e finalizado12

As três fases genéricas do ciclo de vida de um software são:

Definição: nesta fase ocorre o levantamento de requisitos, que consiste em

identificar e documentar as necessidades e expectativas dos clientes e usuários
do software. Também ocorre a definição do escopo, dos objetivos, das
restrições e dos riscos do projeto13
Desenvolvimento: nesta fase ocorre a análise de sistemas, que consiste em
modelar e especificar as funcionalidades, os dados, as interfaces e os
componentes do software. Também ocorre o projeto, que consiste em definir a
arquitetura, os padrões, as ferramentas e os métodos a serem utilizados no
desenvolvimento. Além disso, ocorre a implementação, que consiste em
codificar, testar e integrar o software13
Manutenção: nesta fase ocorre a implantação, que consiste em instalar,
configurar e liberar o software para o uso dos clientes e usuários. Também
ocorre a manutenção, que consiste em corrigir erros, melhorar o desempenho,
adaptar o software a novas necessidades ou tecnologias e evoluir o software
com novas funcionalidades13
Portanto, a alternativa correta é a letra E, pois todas as afirmações estão de
acordo com o ciclo de vida de um software.

2. “HTML é uma linguagem descritiva de hipertextos composta por tags. Hoje o

HTML em sua versão mais recente combina outras tecnologias como CSS e
 JavaScript que complementam os hipertextos com estilo e interatividade
respectivamente.”
Sobre o tópico em questão considere as afirmações a seguir descreva:
I - <table> é a tag para tabelas
II - <tr> é a tag que adiciona uma linha dentro da tabela
III - <li> é a tag para adicionar colunas na tabela.

É correto o que se afirma em

A – I apenas
B – II apenas
C – III apenas
D – I e II apenas
E – I, II e III

3. De acordo com o que foi visto na aula 3, qual é o termo utilizado no

desenvolvimento de software para descrever uma imperfeição ou deficiência
em um produto que não atende aos requisitos ou especificações e precisa
ser reparado ou substituído?
A – erro
B – bug
C – falha
D – defeito
E – fault

4. Com base no texto é correto afirmar:

I – O texto em questão fala em software aplicativo, mostrando exemplos que
vão desde software de gestão até aplicação em inteligência artificial.
II – Existem vários exemplos de softwares de sistema (básico) no texto,
como os ERP, CRM e navegadores.
III – Os softwares de inteligência artificial, ganham cada vez mais espaços
na web, sendo conhecidos também como software embarcado.

É correto o que apenas o que se afirma em:

A–I
B – II
C – III
D – I e III
E – II e III

5. Qual das seguintes ferramentas é uma ferramenta de controle de versão e

não é considerada distribuída?
A – Git
B – Bitkeeper
C – Subversion
D – Mercurial
E – Bootstrap
uma ferramenta de controle de versão é um software que ajuda a rastrear e
gerenciar as alterações em um código de software ao longo do tempo.
Existem dois tipos principais de ferramentas de controle de versão:
centralizadas e distribuídas. As ferramentas de controle de versão
centralizadas usam um único repositório central para armazenar todas as
versões do código, e os desenvolvedores precisam se conectar a esse
repositório para fazer as alterações. As ferramentas de controle de versão
distribuídas permitem que cada desenvolvedor tenha uma cópia local do
repositório, e as alterações são sincronizadas entre os repositórios por meio
de operações de push e pull12

Portanto, a alternativa correta é a letra C, pois o Subversion é uma

ferramenta de controle de versão centralizada, e não distribuída. As outras
alternativas são ferramentas de controle de versão distribuídas, exceto a
letra E, que é um framework de desenvolvimento web, e não uma
ferramenta de controle de versão