Fundamentos

de
Informática
Manipulação de arquivos

• Criar Arquivos
• Deletar Arquivos
• Mover Arquivos
• Renomear Arquivos
Manipulação de pastas

• Criar Pastas
• Deletar Pastas
• Mover Pastas
• Renomear Pastas
Tipos de arquivos

• Tipos de Arquivo de Imagem

• Tipos de Arquivo de Áudio
• Tipos de Arquivo de Vídeo
• Tipos de Arquivo de Texto
Informações do Sistema
Operacional

• Tipo do Sistema
• Hardware
• Processos
• Tarefas
Navegadores

• O que são Navegadores

• Diferenças entre os navegadores
Downloads

• Como baixar
• Onde Baixar
• Taxa de Transferência
• Pasta de Downloads
Metodologias
Ágeis
Scrum
É um framework de gerenciamento de projetos
muito utilizado em equipes de desenvolvimento de
software, porem pode ser aplicado a qualquer tipo
de trabalho em equipe

- Sprint
- Product Backlog
- Sprint Planning
- Sprint BackLog
- Daily Meeting
- Sprint Review
- Sprint Retrospective
- Scrum Master
- Product Owner
Kanban
Criado pela Toyota na década de 60 e usado até hoje por empresas, o Kanban
consiste em organizar as tarefas em colunas e movimenta-las de acordo com
seu pregresso.
Trello
Aplicativo de gerenciamento de
projeto que utiliza como modelo o
Kanban, nele é possível criar cartões
e adicionar elementos como prazos,
responsável, checklists, etiquetas,
dentre outros e movimenta-los pelas
colunas conforme seu status.
https://trello.com/pt-BR
Trello + Scrum + Kanban
Versionamento
( Git e Github )
É um sistema de controle de versões usado
principalmente no desenvolvimento de software,
mas pode ser usado para registrar o histórico de
- git init
edições de qualquer tipo de arquivo local. - git add
- git commit
- git status
- git log
- git remote
- git push
GitHub é uma plataforma de hospedagem de - git pull
código-fonte e arquivos com controle de versão
usando o Git.
Design De
Interface
Básico
É um editor gráfico focado no desenvolvimento de
sistemas de design gráfico, prototipagem de interface
gráfica de usuário e desenvolvimento de UI/UX com
opções online e offline.

https://www.figma.com/
1 2 3

4
5
1 – Frame
2 – Formas
3 – Texto
6 4 – Alinhamento
5 – Dimensões
6 - Grid
7
7 – Preenchimento
8 8 – Contorno
9 9 - Efeitos
Wireframe

Um Wireframe é uma
ilustração semelhante ao
layout e tem como
principal objetivo dispor o
posicionamento dos
elementos de uma tela.
Tamanhos de Telas
FULL HD - 1920 - 1080P
4K - 3840 - 2160px

Prancheta para layout – desktop / 1920px 320

Prancheta para layout – tablet / 768px 1920px 768px
px
Prancheta para layout – mobile / 320px
Layout de Alta fidelidade

Layout de Alta fidelidade é

uma representação visual,
com detalhes de como o
produto final deve ficar, já
o Protótipo de Alta
fidelidade acrescenta
também funcionalidades à
interface.
Layout de Alta fidelidade
UI – ( User Interface ou Interface do Usuário ),
o objetivo da UI é tornar a interação do
usuário com o sistema o mais simples possível
levando em consideração seu publico alvo.

UX - ( User Experience ou Experiencia do

Usuário ) é o conjunto de elementos relativos
a experiencia do usuário em relação ao
sistema, como o usuário utiliza o sistema.
Teoria das Cores
Quando e quais
cores utilizar?
 Tipografia
Quando e quais fontes utilizar?
- Fonte Serifada
Com traços alongados em suas extremidades podem ser
facilmente encontradas em textos longos por facilitar sua leitura.
- Fonte não Serifada
Fonte mais simplificada, sem alongamentos nas extremidades
mais utilizadas em textos curtos, simples e objetivos.
- Fontes Caligráficas
Fonte que se aproxima da escrita cursiva, partindo da ideia de
liberdade e singularidade mais utilizadas em textos para causar
impacto visual.
- Fontes Decorativas
Utilizadas comumente em logotipos e não empregadas em textos
para leitura por terem uma característica mais visual.
Teoria da Forma - Gestalt
A teoria de Gestalt se baseia na ideia de que para
se compreender as partes devemos antes
compreender o todo.
- Segregação
- Proximidade
- Semelhança
- Fechamento
- Continuidade
- Pregnância
- Unidade
Estrutura de
Paginas
Web
Introdução às Tecnologias
Introdução às Tecnologias

HTML – Linguagem de estruturação de páginas web,

define como será a estrutura e o conteúdo da página.

CSS – Linguagem de estilização de páginas web, define

as configurações de aparência dos elementos da
página.

JavaScript – Linguagem de programação responsável

por implementar funcionalidades em uma página e
torna-la mais dinâmica.
Introdução às Tecnologias

ReactJS – Biblioteca para construção de interfaces de

usuário em páginas Web.

React Native – Biblioteca para construção de aplicativos

Híbridos (IOS e Android).
Introdução às Tecnologias

Ferramentas
Introdução às Tecnologias

Ferramentas

Visual Studio Code – Editor de código capaz de

trabalhar com várias linguagens.

NodeJS – Interpretador de JavaScript, necessário para

executar os códigos escritos em JS fora do navegador
Introdução às Tecnologias

Links

Visual Studio Code

https://code.visualstudio.com/download

NodeJS
https://nodejs.org/en/
Estrutura de
Páginas Web
Estrutura de Páginas Web

HTML – O HTML é responsável por definir a estrutura de uma página,

para isso utiliza tags para definir os elementos.

Abertura da Tag <html>

Conteúdo da tag <html>

Fechamento da Tag </html>

Estrutura de Páginas Web

Uma página HTML possui

dois elementos essenciais,
o head, que é o elemento
que reúne informações e
configurações da página,
e o body, que marca todo
o conteúdo de uma
página.
Estrutura de Páginas Web

Tags mais comuns:

<h1> - Tag de títulos e subtítulos, vai do <h1> até o <h6>

<p> - Tag de parágrafos

<a src=“https://www.google.com”>Texto do link</a> - Tag de link

<img src=“caminho da imagem” alt=“descrição da imagem”>

Tag de imagem
Estrutura de Páginas Web
Tabelas no HTML:
Estrutura de Páginas Web

Listas não ordenadas no HTML:

Estrutura de Páginas Web

Semântica no HTML5

A principal evolução que o HTML5 trouxe em relação à suas versões

anteriores, foi o maior peso semântico dos elementos, ou seja, existem
mais tags com responsabilidades específicas.

SEMÂNTICA == SIGNIFICADO
Estrutura de Páginas Web

Isso melhorou a estrutura das páginas web, que eram construídas

com mais tags genéricas, agora temos significado em cada seção da
página.

Exemplos:
<header> - Tag para cabeçalhos
<main> - Tag para o conteúdo principal da página
<footer> - Tag para o rodapé
<section> - Marca uma seção de uma página
Estrutura de Páginas Web

Existem centenas de outras tags que podemos utilizar nas nossas

páginas, como podemos verificar em algumas referências:

W3Schools
https://www.w3schools.com/tags/default.asp

Mozilla Developer Network - MDN

https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element -
Estilização de
Páginas Web
Estilização de Páginas Web

CSS – O CSS é a linguagem responsável por definir as configurações

de aparência dos elementos html.

Como por exemplo, definir tamanho dos elementos, cores das fontes,
cores de fundo e também o posicionamento dos itens de uma
página.
Estilização de Páginas Web

Para aplicar as configurações de estilização, o CSS precisa indicar

quais elementos serão alterados, para isso utilizamos os seletores,
para indicar o que será alterado, e como será alterado usamos os
pares de propriedade e valor.
propriedade

seletor valor
Estilização de Páginas Web

Temos várias formas de selecionar os elementos, vários tipos de

seletores, dentre os principais estão:

Por nome de tag: Seleciona todos os elementos que possuem esse

nome de tag.

Ex.: Todos os elementos <a> terão como cor de fonte o vermelho

Estilização de Páginas Web

Por nome de classe(class): Seleciona todos os elementos que

possuem o esse valor no atributo class.

Ex.: Todos os elementos com a classe link

terão como cor de fonte o azul escuro
Estilização de Páginas Web

Pelo id do elemento: Seleciona o elemento que possui esse valor no

atributo id.

Ex.: O elemento com o id campo-email terá

30px de altura e cinza como cor de fundo
Estilização de Páginas Web

Outro seletor muito utilizado é o seletor universal, é usado

principalmente quando queremos remover alguma estilização
padrão (CSS Reset)

Ex.: CSS Reset, zerando os valores de margin e

padding, e definindo o box-sizing para border-box
Estilização de Páginas Web

Referências para seletores CSS:

W3Schools
https://www.w3schools.com/cssref/css_selectors.asp

Mozilla Developer Network - MDN

https://developer.mozilla.org/en-US/docs/Web/CSS
Estilização de Páginas Web

Tratando de posicionamento e disposição dos elementos, o CSS3 tem

uma técnica de chamada flexbox, com essa técnica, podemos
facilmente criar layouts mais flexíveis e responsivos, sem utilizar
técnicas mais antigas e mais rígidas como o float e o position.
Estilização de Páginas Web
Principais propriedades:

display: flex; -> Indica que o elemento é um container flex, e

habilita as demais propriedades do flexbox

flex-direction: -> Propriedade que indica o sentido de

disposição dos seus elementos filhos
justify-content: -> Determina o alinhamento dos itens no mesmo
sentido de disposição dos elementos do container
Estilização de Páginas Web

Referências:

Guia do Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexbox Froggy – Exercício para fixação

https://flexboxfroggy.com/
Estilização de Páginas Web

Para algumas ocasiões específicas, pode ser interessante utilizar a

técnica de position.

Como por exemplo, fixar o cabeçalho da página para torná-lo

disponível ao clique ao longo de toda a rolagem
Estilização de Páginas Web

Fixa o elemento na tela

Faz com que o elemento

fique por cima dos outros

Posiciona o elemento à
uma distancia de 0px da
extremidade superior da
página, ou seja, no topo
Estilização de Páginas Web

Referências:

Referencia de Position, W3Schools

https://www.w3schools.com/cssref/pr_class_position.asp
Estilização de Páginas Web

É muito comum em várias aplicações, utilizarmos dependências, que

são arquivos externos que adicionam alguma funcionalidade ou
característica ao projeto.

Podemos, por exemplo, adicionar fontes e ícones prontos de

provedores CDN, com o intuito de implementar designs mais
diversos.
Estilização de Páginas Web

Duas opções de CDN que oferecem essas possibilidades, são o

FontAwesome e o Google Fonts. Ambos possuem guias de utilização
bem simples e fáceis.

FontAwesome
https://fontawesome.com/

Google Fonts
https://fonts.google.com/
Estilização de Páginas Web

Responsividade

Usando todos esses conceitos, ainda é necessário garantir que a

página desenvolvida seja utilizada pelo público alvo do negócio, e a
maioria das pessoas atualmente acessam sites da internet utilizando
dispositivos móveis, como smartphones e tablets.
Estilização de Páginas Web

Para garantir que nossas aplicações estejam acessíveis e com boa

usabilidade nos dispositivos móveis, temos que entender e
implementar os conceitos de responsividade.

Uma aplicação responsiva é uma aplicação que se adequa

perfeitamente aos diferentes tipos diferentes de dispositivos.
Estilização de Páginas Web

Para isso temos que sempre considerar a largura de tela dos

dispositivos de destino no desenvolvimento das aplicações, pois esse
é o principal fator que a aplicação terá de se adequar.

Essa adequação é feita pelo CSS pelas media queries, que com base
em características do dispositivo, como largura da tela, consegue
mudar alguma configuração de estilo de uma página.
Estilização de Páginas Web

Nas media queries é possível modificar qualquer configuração de

estilo feita por CSS. Por exemplo, podemos modificar a largura de
uma imagem, em dispositivos com largura de tela inferior à 768px

Configuração padrão da tag <img>

Configuração da tag <img>, para
dispositivos de telas menores
 Linguagem de
Programação para
Páginas Web
Histórico da Linguagem

JavaScript, nomeada inicialmente por LiveScript, é uma

linguagem de programação criada em por Brendan Eich a
pedido da Netscape no ano de 1995.

Na época a empresa SUN Microsystem (Java), hoje sob domínio

da Oracle, entrou de cabeça na colaboração do
desenvolvimento da linguagem, pois viu vantagem em sua
ideia inicial, a validação de formulários web.

Foi criada para ser Server Side, porém acabou como Client Side.
Histórico da Linguagem

A Microsoft percebeu o poder do JavaScript e ao invés de

ajudarem no desenvolvimento acabou desenvolvendo sua
própria linguagem, a Jscript para rodar apenas em seus
navegadores o Internet Explorer.

Foi uma dor de cabeça para os desenvolvedores da época, pois

deveriam dominar as duas linguagens para os seus sites
rodarem em todos os navegadores.
Histórico da Linguagem

A ECMA International, empresa dedicada a padronização de

sistemas de informação, criou a especificação ECMA-262,
utilizada em tecnologias web em geral e nomeada de
ECMAScript.
A Netscape submeteu o JavaScript para as especificações
ECMA-262 no final de 1996.
Tanto JavaScript como JScript são baseadas em ECMAScript
porém com recursos adicionais.
Atualmente a linguagem ECMAScript adotou o nome
JavaScript por motivos comerciais e hoje podemos considerar a
linguagem padrão da Web.
Programa

Conceito

Um programa, independente de linguagem, é composto por

um conjunto de instruções que são os passos para a resolução
de um determinado problema.
A solução se divide em 3 etapas principais:
Exemplo
Variável

Conceito

Variável é um recurso computacional que serve para

armazenamento de dados temporários na memória.

A grosso modo é composta de um nome e um valor, como no

exemplo anterior onde tivemos os números digitados pelo
usuário armazenados em duas variáveis para utilização
posterior, em um cálculo aritmético.

O valor de uma variável, claramente, varia com o tempo.

Exemplo 1
 Exemplo 2

Uma variável possui este nome por armazenar valores que podem variar com o tempo
de execução do seu programa. Veja:

11

12

13

● Na linha 11 definimos uma variável com o nome n1 e valor 5 (não é necessário utilizar a instrução
”var”, devido ao fato de JavaScript ser de tipagem fraca);
● Na linha 12 o valor da variável n1 foi substituído pelo valor que ela tinha multiplicado por 2
● Na linha 13 foi exibido o valor da variável para o usuário. Repare que o valor foi é referente à
última atualização da variável;
Regras básicas para definição

• Pode começar apenas com letras, _ (”underlines”) ou $ (”cifrão” apenas no início);

• Pode conter letras, underlines e números (caracteres alfanuméricos), a partir do segundo
caracter;
• NÃO PODE conter espaços;
• NÃO PODE começar com números;
Tipos de Dados
Conceito

Tipos de dados são os possíveis valores que podem ser atribuídos às variáveis. São eles:
Number
Qualquer tipo numérico como real (float) ou inteiro (Integer);

String
cadeia de caracteres imutáveis onde cada caracter está contido em uma posição, da
esquerda para a direita, a partir do zero e pode ser utilizado aspas duplas ou simples:
Tipos de Dados
Bool
Valores que representam o estado verdadeiro (true) ou falso (false)

Undefined
Inexistência ou variável não criada.

Null
Ausência de valores. Neste caso a variável pode receber um valor null ou nunca ter recebido algum
valor, porém a variável existe;

NaN
É um tipo especial, na realidade uma propriedade global do JavaScript cujo seu valor especifica que
o valor não é um número. É uma propriedade somente leitura. Você não pode configurá-la.
Exemplo: a expressão (”Eduardo” * 10) retorna NaN.
Tipos de Dados

infinity
É um tipo especial que especifica que o valor é infinito. Quando se faz uma
divisão por zero em algumas linguagens, é retornado o valor ”não existe
divisão por 0”, porém matematicamente esse valor é um valor infinito
tendendo a zero. Dessa forma, no JavaScript teremos o mesmo resultado.
Tipos de Dados
Object e Arrays
Estruturas de dados formadas por pares de chave e valor

Array
Tipo de dado composto por índices e valores onde esses valores podem ser qualquer
tipo de dado suportado pela linguagem JavaScript, inclusive outro array.
Tipos de Dados
Object
Tipo de dado composto por pares de chave e valores onde esses valores podem ser
qualquer tipo de dado suportado pela linguagem JavaScript, inclusive outro objeto.
Introdução ao DOM
DOM – Document Object Model ou Modelo de Objeto de Documento, é
uma interface que representa o documento HTML da página web.

E uma interface de programação para manipulação de documentos

HTML, XML e SVG e está disponível para várias linguagens.

O DOM fornece essa interface através de nós e objetos para que

possamos manipular toda nossa página através de métodos e
propriedades, em nosso caso, JavaScript, onde veremos mais adiante
A ideia lógica do DOM é como uma árvore
do HTML conforme a imagem
A hierarquia começa pelo objeto window:
window.document.body ou apenas
document.body
Métodos DOM

Nós veremos os principais métodos para o entendimento na criação e

manipulação de elementos HTML através do DOM.

Lembrando que JavaScript é case sensitive isso quer dizer que os métodos do
DOM são escritos dessa forma: getElementById e não getelementbyid.

Os nomes desses métodos foram assinados com o padrão Camel Case a partir da
segunda palavra.
 getElementById()
Pegando um elemento através do id e retorna o seu objeto.

Opcionalmente você pode retornar apenas uma propriedade do objeto selecionado:

 getElementsByClassName()
Seleciona uma coleção de elementos através do nome da classe. Perceba o plural ”Elements”
 getElementsByTagName()
retorna os elementos, ou seja, uma coleção, através do nome de uma tag
 getElementsByTagName()
retorna os elementos, ou seja, uma coleção, através do nome de uma tag
querySelector()
Retorna um elemento, da mesma forma que o getElementById() porém você você utiliza um seletor
CSS ao invés do nome do ID.
DICA: Em resumo, você pode pegar um elemento
utilizando os seletores CSS disponíveis. querySelector.
querySelectorAll()
Funciona da mesma forma que o querySelector porém retorna um Array.
 createElement() and appendChild()

Os dois próximos métodos da interface DOM servem para criar elementos e adicioná-los ao DOM.

É como se fossemos utilizar o innerHTML, porém aqui a ideia é criar cada elemento como um objeto
separadamente.

Imagine que você precisa criar um elemento div qualquer e adicioná-lo em sua página. Com
innerHTML fizemos algo como na imagem abaixo:
Com createElement você cria um fragmento do elemento em
memória e logo em seguida utiliza o método appendChild para
inserir o elemento de fato no HTML. Veja:
 removeChild()
Remove um nó filho do DOM. Devolve o nó removido.
 parentNode
Node.parentNode é uma propriedade DOM somente leitura que retorna o nó (node) parente de um
Node referenciado na árvore DOM. É extremamente aconselhável que você conheça a estrutura DOM
para um melhor estudo e aprendizado.
DEPARTAMENTO REGIONAL
DE SÃO PAULO

www.sp.senai.br