Você está na página 1de 18

RESUMO DE PROGRAMAÇÃO BÁSICA:

FRONT E BACKEND
Sumário
1. Introdução:......................................................................................................................5
1.1. Diferença entre Editor de texto e uma IDE...................................................................5
2. HTML...............................................................................................................................5
2.1. Organização em HTML..................................................................................................5
2.1.1. Criação básica do código (manual “do zero”):......................................................5
I. Informar ao navegador a linguagem de escrita:...............................................................5
2.1.2. Tags de básicas de semântica e organização hierarquica.....................................6
2.2. Tags em HTML..............................................................................................................6
2.2.1. Tags de organização DE TEXTO.............................................................................6
I. Títulos...............................................................................................................................6
II. Parágrafos........................................................................................................................6
III.Menus..............................................................................................................................6
IV. Listas.........................................................................................................................6
2.2.2. Tags de escrita e formatação:...............................................................................7
I. Bold (negrito)...................................................................................................................7
II. Emphasis (itálico).............................................................................................................7
III.Riscado.............................................................................................................................7
IV. Espaço e pular linhas................................................................................................7
V. Word-Breaker/soft hyphen (querbra de palavras)...........................................................7
VI. Símbolos especiais....................................................................................................7
VII. Sobrescrito/subescrito.............................................................................................7
VIII. Code (código)...........................................................................................................8
IX.Pré (pré-formatação)........................................................................................................8
2.2.3. Mídias e links........................................................................................................8
I. Imagens............................................................................................................................8
II. Hiperlinks.........................................................................................................................8
2.2.4. Tags depreciads....................................................................................................8
2.2.5. “Sub-referências” de tags.....................................................................................8
I. Class.................................................................................................................................8
II. ID 9
2.2.6. Tabelas.................................................................................................................9
3. CSS...................................................................................................................................9
3.1. Como utilizar................................................................................................................9
3.1.1. Diretamente no corpo do texto:...........................................................................9
3.1.2. Parâmetro global da pagina..................................................................................9

2
3.1.3. Num arquivo separado;........................................................................................9
I. Escrever no html:.............................................................................................................9
II. Escrever no css...............................................................................................................10
3.2. Escrevendo em CSS.....................................................................................................10
I. Escrita em geral..............................................................................................................10
II. Comentários...................................................................................................................10
III.Como referenciar tags....................................................................................................10
3.3. Principais tags de formatação....................................................................................10
3.4. Subtags (não chama assim mas eu quero, e foda-se!)................................................11
3.5. Informações adicionais...............................................................................................11
3.5.1. Código HEXADECIMAL:.......................................................................................11
3.5.2. Código RGB.........................................................................................................11
3.6. Efeitos e truques:.......................................................................................................11
3.6.1. Menu flutuante:..................................................................................................11
3.6.2. Aparência de botão............................................................................................11
3.6.3. Mudar quando o mouse passar:.........................................................................11
3.6.4. Importação de fonts de uma pasta.....................................................................11
3.6.5. Importação de fonts pública (ex.: Google)..........................................................12
4. JavaScript-HTML............................................................................................................12
4.1. Código direto em .html...............................................................................................12
4.2. Chamada de códigos externos....................................................................................12
5. PHP................................................................................................................................12
5.1. Instalação do php.......................................................................................................12
5.1.1. Windows.............................................................................................................12
5.1.2. Linux:..................................................................................................................12
5.2. Usando o php.............................................................................................................13
5.2.1. Usando o cmd:....................................................................................................13
5.2.2. Verificando a versão no shell:.............................................................................13
5.2.3. Utilizando o sublime:..........................................................................................13
5.3. Como escrever um programa básico:.........................................................................13
5.4. Definir Variável – valor e referência...........................................................................13
5.5. Condicionais...............................................................................................................14
5.5.1. Comparadores....................................................................................................14
5.5.2. If// Else// else if..................................................................................................14
5.6. Laços...........................................................................................................................14
5.6.1. While..................................................................................................................14

3
5.6.2. For......................................................................................................................14
5.6.3. Exceção...............................................................................................................15
5.7. Listas...........................................................................................................................15
5.7.1. Array associativa:................................................................................................15
I. Escrever uma array associativa.......................................................................................15
II. Acessar dados da Array Associativa................................................................................15
III.Percorrer uma Array Associativa....................................................................................16
IV. Editar Arrays:..........................................................................................................16
5.8. Funções......................................................................................................................16
5.9. Impressão de resultados............................................................................................16
5.9.1. Imprimir resultado..............................................................................................16
5.9.2. Caracteres auxiliares de impressão....................................................................17
5.9.3. Impressão com funções e Arrays associativas....................................................17
I. Método 1 – Sem aspa simples........................................................................................17
II. Método 2 – Com chaves.................................................................................................17
5.10. Comunicação de arquivos...........................................................................................17
I. Include............................................................................................................................17
II. Require...........................................................................................................................17
5.11. Erros...........................................................................................................................17
5.12. Habilitar bibliotecas....................................................................................................18

4
1. Introdução:

1.1. Diferença entre Editor de texto e uma IDE

Basicamente uma IDE é um programa para facilitar a escrita do código, enquanto o Editor é
apenas um “caderninho”, sem funções agregadas. IDE é praticamente um editor de texto
melhorado.

2. HTML

2.1. Organização em HTML

2.1.1. Criação básica do código (manual “do zero”):

I. Informar ao navegador a linguagem de escrita:

<!DOCTYPE html>

(deve vir na primeira linha. Considerado boa prática de programação)

Logo a seguir, TUDO deve vir entre as tags <html> </html>

II. Divisão de espaço de trabalho:

<html>

<head>Espaço de configurações comportamentais da página. Será detalhado mais a frente


</head>

<body> Corpo principal da pagina

Ver mais a frente as tags semânticas

<body

</html>

III. Colocar as configurações da pagina no head

<html lang=”pt-br”>

<head>

<meta charset= “utf8mb4”/>

<title> TITULO DO SITE> </tiltle>

<style> Formatação css do site. Ver mais a frente </style>

</head>

5
2.1.2. Tags de básicas de semântica e organização hierarquica

<body>

<div id= “nome da id, tudo junto e sem caracter especial”>

Serve para seccionar uma porção especial do texto. Como Menus, cabeçalhos, etc>

</div>

<header>Cabeçalho, não necessariamente só do site

<nav> Menus </nav>

</header>

<section>um corpo principal, ou uma parte dele

<article> Um artigo< </article>

</section>

<aside> um corpo “secundário” em importância</aside>

<footer> um rodapé, com informações da pagina e/ou autor</footer>

</body>

2.2. Tags em HTML1

2.2.1. Tags de organização DE TEXTO

I. Títulos

<h1> Título primário </h1>; <h2 Título secundário</h2> .......

II. Parágrafos

<p> paragrafo </p>

III. Menus

<nav></nav>

IV. Listas

V. Ordered lists

<oi type=“simboloDaOrdenação”> </oi start= “posiçãoInicialEmNumero”>

VI. Unordered lists (ul)

<ol> estilos agora são em css</ul>

VII. Lists Itens (li)

1
Tag hgroup já obsoleta

6
Ex1.: <ol>

<li> ítem 1 da lista </li>

<li> ítem 2 da lista </li>

2.2.2. Tags de escrita e formatação:

I. Bold (negrito)

<b> AQUI ENTRA O TEXTO EM NEGRITO </b>

II. Emphasis (itálico)

<i> AQUI ENTRA O TEXTO EM ITALICO, SEM SEMÂNTICA</i>

<em> AQUI ENTRA O OUTRO TEXTO EM ITALICO, POREM COM SEMANTICA <em>

III. Riscado

<del> TEXTO COM RISCO NO MEIO </del>

IV. Espaço e pular linhas

Linha 1 <br> Linha 2

Palavra 1 <nbsp> Palavra 2

V. Word-Breaker/soft hyphen (querbra de palavras)

Tes<wbr>tando = “tes tando”

Tes&shy;tando = “tes - tando”

VI. Símbolos especiais

TAG SIMBOLO TAG SIMBOLO


&lt < &pund £
&gt > &yen ¥
&le ≤ &euro €
&ge ≥ &ômega ω
&sum ∑ &delta δ
&infin ∞ $Delta Δ
&ne ≠ &larr ←
&plusmn ± %darr ↓

VII. Sobrescrito/subescrito

Assim <sup> Texto superior </sup> e assim<sub> texto inferior </sub>. =

7
Assim Texto superior e assim texto inferior.

VIII. Code (código)

<code> Tudo que estiver entre estas tags, terá a formatação de um código de programação
</code>

Contudo, o código ainda vem mal configurado. Uma opção interessante é o uso da tag “pre” e ,
entre as tags <pre> usamos o <code>

IX. Pré (pré-formatação)

<pre>todo o código que vem entre estas tags é considerado pré-formatado. No caso, todos os
espações e enters são considerados no resultado final. </pre>

2.2.3. Mídias e links

I. Imagens

<figure> (Esta tag tem função semântica)

<img src=“PastaNãoAbsoluta/imagem.formato”>

<figcaption>

Legenda da imagem. Podendo ser um texto composto, inclusive com títulos

</figcaption>

</figure>

II. Hiperlinks

III. Tag Ancora <a>


IV. <a href= “endereço do hiperlink2”> Nome que vai se tornar um
hiperlink </a>
V. <a href= “http:://www.teste.com” target= “_blank”> Mesma bosta
</a>

2.2.4. Tags depreciads

<u> Texto em underline </u>

<s> texto riscado </s>

<hgroup> sem substituto </hgroup>

2.2.5. “Sub-referências” de tags

I. Class

Ex.: <figure class= “classe-tipo1”>

Quando usado com css, temos uma especificação melhor. Ver posteriormente

II. ID
2
http:://

8
Semelhante ao class, porém com algumas poucas diferenças. Uma delas é o fato de class ser
usada para múltiplas tags, enquanto id é utilizada para apenas uma.

2.2.6. Tabelas

<caption> Título da tabela</caption>

<tr3><td4> dados da célula 1</td> <td> dados da célula 2</td></tr>

Obs: <td rowspan=”2”> nos informa que este parâmetro ocupa 2 linhas</td>

<td colspan=”2”> nos informa que este parâmetro ocupa 2 colunas</td>

3. CSS

Em resumo, CSS é a linguagem utilizada para inserir estilos no código HTML. Geralmente temos
um código da seguinte maneira:

3.1. Como utilizar

3.1.1. Diretamente no corpo do texto:

< tagHTML style= “OqueMexer: deixar-assim;”>

Ex.: <h2 style= “text-align: justify; text-indent: 50px”>

3.1.2. Parâmetro global da pagina

<header

<style>

tagHTML {

oQueMexer1: deixar-assim;

naquiloTbm: 0px;

</style>

</header>

3.1.3. Num arquivo separado;

I. Escrever no html:

<header>
<link rel= “stylesheet” type=”text/css” href= “localizazãoDoArquivo/nomeDoArquivo.css”/>

</header>

3
Table Row
4
Table Data

9
II. Escrever no css

@charset utf8nb4;

(escrever o styles).

3.2. Escrevendo em CSS

I. Escrita em geral

Lembrando que nos arquivos de css não temos “ ” nas escolhas de configurações, apenas
nos caminhos de arquivos. Lembrar tbm que escrevemos a ‘variável’ seguida de {}, e que
dentro das chaves vem as tags em css

II. Comentários

/* Aqui dentro vai um comentário*/

III. Como referenciar tags

Em geral temos que:

Tag.class tudoQueforNesseFormato5 { formatação; }

Podemos ter ainda que:

Tag.class tudoQueforNesseFormato: evento6 { formatação;}

Outra forma:

TagdeaDivisão#id tagNoHtml{ formatação }

Ou:

Tag#id oTipo.aClasse

3.3. Principais tags de formatação

I. Text.align
II. Text-indent
III. Background-color
IV. border: 1px solid red;
V. width: 90%;
VI. height: 100%;
VII. box-shadow: 1px 1px 4px black
VIII. padding7
IX. box-sizing: border-box
X. opacity
XI. transition: opacity 1s
XII. list-style: square
XIII. text-transform: uppercase
XIV. display: inline-block8

5
= figcaption OU .png OU etc
6
Ex.: hover
7
Margem/espaçamento INTERNO
8
Faz com que sejam exibidos na horizontal (“transpor” a lista pra horizontal)

10
XV. margin: 5px
XVI. float

3.4. Subtags (não chama assim mas eu quero, e foda-se!)

Serão usados exemplos para facilitar

I. Rgb(000 000 000);


II. Rgba(000 000 000 0.5); -> RGB com transparência.
III. Hsl (sem tempo irmão);
IV. url(“aquivo.extensão”);

(deslocHorizont deslocVert espalha cor

3.5. Informações adicionais

3.5.1. Código HEXADECIMAL:

(Ordem crescente): 123456789abcdef

“#”+doisCódigosVERMELHO + doisCódigosVERDE +doiscódigosAZUL

3.5.2. Código RGB

(trêsNúmeroVERMELHO, trêsNúmerosVERDE, trêsNúmeroAZUL)

3.6. Efeitos e truques:

3.6.1. Menu flutuante:

Para menu flutuante na parte superior do site, utilizamos a posição absoluta. Também
é interessante se utilizar do margin com valores negativos para retirar os espaçamentos
“default”. Lembrar do padding na hora do espaçamento interno dos botões

3.6.2. Aparência de botão

Colocar o background-color cria o botão. Um transition pode ser interessante para


efeitos visuais mais atrativos. Para retirar a aprência de hiperlink, usar o color e text-
decoration para retirar configurações indesejadas.

3.6.3. Mudar quando o mouse passar:

Hover com cores diferentes e underline.

3.6.4. Importação de fonts de uma pasta

Logo abaixo de @charset, colocamos:

@font-face {

Font-family: ‘DefinirNomePraFonte’ 9;

9
Entre aspas simples mesmo

11
Src: url(“caminho/NomeFonte.otf”) ;

3.6.5. Importação de fonts pública (ex.: Google)

Entrar no site; pegar o endereço da font em css; copiar o [@font url(http://......);

Colocar após o charset

Colocar o font-family no local, Pode ser retirado o caminho direto do site tbm.

4. JavaScript-HTML

4.1. Código direto em .html

<script>

Tudo aqui dentro será em JavaScript. Antigamente era necessário especificar linguagem, hoje
não mais.

</script>

4.2. Chamada de códigos externos

<script language= “javaScript” src= “pasta/arquivo.js”

5. PHP

5.1. Instalação do php

5.1.1. Windows

I. Entrar e baixar o pacote no site: www.php.net


II. Extrair o arquivo
III. Ir no arquivo e copiar o caminho para o path
IV. Escolher as configurações no arquivo php.ini

Sugestão: renomear o arquivo pronto para desenvolvimento (php.ini – development) para


apenas (php.ini). Tornando-o assim o utilizado.

5.1.2. Linux:

$ sudo apt install php

5.2. Usando o php

5.2.1. Usando o cmd:

>php -a

>echo “Hello world”;

12
>quit

5.2.2. Verificando a versão no shell:

>php -v

5.2.3. Utilizando o sublime:

Para utilizar o php no sublime é necessário criar uma build específica. Para isso utilizamos:

Tools > Build System > New Build System. Um novo arquivo de abrirá para escrever o código
em python. Utilizar o código abaixo como modelo:

"cmd": ["ESCREVER AQUI O ENDEREÇO COMPLETO DO INICIADOR PHP, "$file"],

"file_regex": "php$",

"selector": "source.php",

"quiet": true

Fonte: https://www.youtube.com/watch?v=sZ8h0mgBWNI

Explicações:

Cmd = caminho a ser executado

File_regex = erros que podem ocorrer. No caso já temos uma predefinidos

Quiet true = oculta o finished que existe ao final do python

5.3. Como escrever um programa básico:

a) O código deve vir entre tags de php.


<?php AQUI VAI SEU CÓDIGO >
b) Comentários:

// Comentário de uma linha

/* Comentário estendido de várias linhas */

c) Todo código deve ser finalizado por ponto e virgula ( ; )


d) Usar ponto simples ( . ) para concatenar

5.4. Definir Variável – valor e referência

$valor = 30 ; //definido por valor

&$valor = 30; // definido por referência

$nome = “Victor”;

gettype ($nome); // retorna “string”.

5.5. Condicionais

13
5.5.1. Comparadores

Comparadores por ordem de precedência:

&&

||

and

or

( <; >; <=; >=; ==; != ) -> todos têm a mesma precedência

5.5.2. If// Else// else if

If( $variavel >= 18) {

Código caso verdadeiro

} else if{

Nesse caso eles vêm separado. Não confundir com outras linguagens.

else

Na linha logo abaixo do else vem o código, com ou sem chaves. No caso de apenas 1
linha ele aceita, mas por boa prática colocamos as chaves

5.6. Laços

5.6.1. While

while ($variavel <= 100){

Vai executar o código até 100, incluindo 100. Só inicia o loop enquanto o resultado sair True.

5.6.2. For

Estrutura básica:

for( início-do-contador; condição de execução; incremento contador){}

ex.: for(cont=1; cont<= 100; cont++ ){

echo ‘aqui vai o código’;

5.6.3. Exceção

for($cont=1; $cont<= 100; $cont++ ){

if ($cont ==13) {

continue;

14
// este código reiniciará o loop. Ou seja, o n° 13 é pulado e não executa o código normal.

if ($cont >=13) {

break;

// este código QUEBRA o loop. Encerrando e saindo dele definitivamente.

echo ‘aqui vai o código normal’;

5.7. Listas

$lista1= [23, 12, 54, 23, 67, 78];

$primeiroValor = $lista1 [0] // Retorna 23

$umValor = $lista1[2] // Retorna 54

count($lista1) // retorna a quantidade de itens na lista, ou seja, 7. NÃO CONFUNDIR COM A


POSIÇÃO FINAL.

5.7.1. Array associativa:

I. Escrever uma array associativa

$conta1[

‘titular’ => Victor,

‘saldo’ => 200.0

];

$conta2[

‘titular’ => Harlan,

‘saldo’ => 50.0

];

II. Acessar dados da Array Associativa

$contasCorrente = [$conta1, $conta2];

$conta1[‘titular’]

// retorna “Victor”. Lembrar que não é mais por ordem numérica, mas por nomes!!

$contasCorrente[1][‘titular’] // retorna “Victor”.

15
III. Percorrer uma Array Associativa

Além da maneira obvia, que é utilizando os laços com números explícitos, temos o
FOREACH. Por exemplo:

foreach($contasCorrente as $chaveDeConta => $umNome){

echo “$umNome[‘titular’]” ; // vai imprimir “Victor” e “Harlan”.

echo “$chaveDeConta”; // vai imprimir “titular” e “titular”. Poderia ser um cpf por
exemplo. Permite usar chaves desconhecidas e acessara essas chaves.

ATENÇÃO: As chaves devem ser do tipo Inteiro ou String apenas. Qualquer outro tipo
ele tentará converter para um desses tipos. E se a string for convertível (ex: “123”) ele ainda
tentará converter mesmo assim.

IV. Editar Arrays:

$lista[] = $item // adiciona à ultima posição, adicionando 1 à ultima chave (0 caso não
identifique)

$lista[$chave] = $item //adiciona com a chave especificada

5.8. Funções

function funcaoExemplo($parametro1, float $parametro2, )

{ // A float delimita o tipo de argumento

$resposta = $parametro1 + $paramentro2 //Aqui dentro fica o que vai ser executado

return $resposta //retorna um valor

funcaoExemplo(“uma parametron aqui”) // vai executar a função definida acima

5.9. Impressão de resultados

5.9.1. Imprimir resultado

echo ‘Meu nome é: ’ . $nome;

echo “Meu nome é: $nome ”;

echo “Meu nome é: $nome \n”

5.9.2. Caracteres auxiliares de impressão

16
Lembrar de colocar entre aspas duplas, para ser corretamente interpretado. Semelhante às
variáveis.

\n -> quebra de linha

\r\n -> para Windows é recomendado usar o retorno de carro, apesar do Shell geralmente
entender sem necessidade.

\t -> Tab, espaçamento

(meu texto).PHP_EOL; // EOL significa ‘end of line’. Serve

5.9.3. Impressão com funções e Arrays associativas

echo “($param1 $param2[‘chave2] $param3[‘chave3’])”

O método acima dará erro. Atenção com as aspas, quando e onde coloca-las.

I. Método 1 – Sem aspa simples

echo (“$param1 $param2[chave2] $param3[chave3]”)

II. Método 2 – Com chaves

echo (“$param1 {$param2[chave2]} {$param3[chave3]}”)

5.10. Comunicação de arquivos

I. Include

Include ‘nomeDoArquivo.php’;

O include irá procurar um arquivo. Porem, caso não seja encontrado, irá gerar apenas
um Warning. O programa irá continuar normalmente, como se o arquivo não fosse essencial.

II. Require

Require ‘nomeDoArquivo.php’;

Require_once ‘nomeDoArquivo.php’;

Diferente do Include, o Require irá dar um erro de fato, encerrando o programa assim que o
arquivo não for localizado. O once garante que seja importado apenas uma vez. Caso fosse
feito a tentativa de importar múltiplas vezes iria gerar um erro.

5.11. Erros

E_WARNING -> O php irá identificar e não vai fazer nada, porque não entendeu o comando.
Continua a ser rodado o código

E_NOTICE -> O php irá identificar, porém irá tentar “se virar” fazendo outra coisa no lugar.
Continua a ser rodado o código

E_ERROR -> O php irá identificar e interromper o código


17
5.12. Habilitar bibliotecas

1 – Abrir o php.ini na pasta do php.

2 – Buscar no arquivo (abrir em texto) o termo desejado. Neste caso “mbstring”.

3 – Achar um termo que tenha extension = mbstring (ou outro desejado).

4 – Remover o ponto e virgua ( ; ) do início da linha

5 – Procurar extension_dir e achar o local especificado para o Windows.

6 – Retirar o comentário abaixo, conforme especificado.

7 – Salvar. Ok

18