Conteúdo introdutório essencial para entrar na área de desenvolvimento web
A ideia do projeto nasceu de dois interesses:
Caso tenha interesse em contribuir, seja acrescentando/melhorando/removendo assuntos quanto corrigindo erros de português, acesse o projeto
Mantido com uma linguagem informal, o conteúdo a seguir pretende ensinar de maneira simples assuntos introdutórios para entrar na área de desenvolvimento web. Abordaremos:
Os assuntos serão pouco aprofundados, a proposta desse material é explicar o essencial para que você (leitor) estude tópicos mais avançados por conta própria ou saiba reconhecer cursos/livros interessantes. Não prometo que ao final da leitura você estará apto para a primeira vaga, pois acredito que o ideal é desenvolver e expor projetos pequenos no Github e Linkedin.
Após dominar os assuntos presentes nesse material, recomendo o estudo de:
Não, algumas empresas maiores podem exigir, porém é muito fácil de encontrar vagas que não se importam com isso. Vale mais a pena focar em conseguir a primeira oportunidade e depois cogitar ir para uma faculdade.
Não, mas certamente ajudaria para pesquisar mais tópicos e conteúdos mais especializados.
Recomendo ler 3 vezes: 1) uma primeira leitura rápida para alinhar a expectativa do que será abordado, 2) mais calma fazendo anotações e praticando quando fizer sentido e 3) rápida para entender os conceitos abordados e praticados.
Acredito que no mínimo um processador i3 e 4gb de RAM.
Visual Studio Code, não confundir com Visual Studio. Vai ser a ferramenta que usaremos para escrever nos arquivos.
O desenvolvimento web é uma área específica dentro da área de desenvolvimento de software (programa). De maneira simplificada, a web é o acesso a sites/sistemas online utilizando o protocolo HTTP, onde que é feita uma requisição a um servidor e é retornada uma resposta (podendo ser em HTML, JSON ou outros formatos).
Se tratando de desenvolvimento web existem duas ramificações:
Uma página web normalmente vai ter um conteúdo, estilização e
interação (respectivamente: HTML, CSS e
Javascript). O navegador/browser lê os arquivos recebidos do
back-end (.html
, .css
e .js
) e
renderiza de acordo. Porém com
ctrlshifti podemos ver como eles
realmente são: texto!
Imagine o seuginte cenário: O navegador recebe um arquivo contendo todo o conteúdo do site, como ele sabe o que é título, link, lista e etc? Afinal, é uma informação necessária para delimitar a informação, exemplo:
Lista de compras
Mercado
Farinha
Leite Ovos
Pode ser lido como
Lista de compras <- titulo
Mercado <- item da lista
Farinha <- item da lista
Leite <- item da lista Ovos <- item da lista
ou
Lista de compras <- titulo
Mercado <- subtitulo
Farinha <- item da lista
Leite <- item da lista Ovos <- item da lista
Para isso existem as tags, cujo explicitam a intenção de um grupo de texto. O exemplo anterior ficaria da seguinte forma:
<h1>Lista de compras</h1>
<h2>Mercado</h2>
<ul>
<li>Farinha</li>
<li>Leite</li>
<li>Ovos</li>
</ul>
Tags abrem, envolvem e fecham da seguinte maneira:
<nome>conteudo</nome>
Sua vez: Crie um arquivo chamado
teste.html
, e abra de duas maneiras diferentes: 1) com seu editor de texto e 2) com o navegador. Escreva a lista de compras pelo editor de texto e visualize as alterações no navegador! Lembre de atualizar a página do navegador com F5 a cada mudança.
Todas tags podem possuir classes e um id. Esses artíficios não são visuais, eles servem para registrar de alguma forma essa tag para poder ser utilizada mais facilmente pelo CSS e Javascript.
<h1 class="titulo">Lista de compras</h1>
<h2 id="subtitulo">Mercado</h2>
<ul>
<li class="item-novo importante">Farinha</li>
<li class="">Leite</li>
<li class="importante">Ovos</li>
</ul>
Não basta especificar um título, link etc, precisamos estilizá-lo também. Tamanho da fonte, cor, alinhamento e outras propriedades são configuráveis.
Essas estilizações são feitas com um arquivo .css
, para
mudar a cor do título podemos fazer o seguinte:
h1 {color: blue;
}
Especificamos com um seletor e em seguida atribuimos alguma de suas propriedades. Os seletores mais comuns são: nome da tag, classe ou id.
.titulo { /* classe */
color: blue;
}
#subtitulo { /* id */
color: blue;
}
Para utilizar as definições feitas pelo CSS precisamos importar elas no nosso HTML precisamos alterá-lo com:
<head>
<link rel="stylesheet" href="./nome-do-arquivo.css">
</head>
Com conteúdo estruturado e estilizado falta adicionar interação ao site.
Criaremos um sistema de agendamento chamado Reiserva onde que:
BCMath
Ctype
Fileinfo
JSON
Mbstring
OpenSSL
PDO
Tokenizer
XML
Acesse a pasta onde guarda seus projetos, abra um terminal e execute
composer create-project laravel/laravel reiserva
Trabalharemos com TDD, primeiro criamos um teste falho, fazemos ele passar, melhoramos e repetimos.
Crie o teste com
php artisan make:test ReservaServiceTest
, edite o arquivo
alterando o nome da função para testReservaAmbiente
. Vamos
testar que dado um usuário (User
) e um ambiente, podemos
criar uma reserva através da classe ReservaService
.
Crie as outras classes que usaremos:
ReservaService
como
app/Services/ReservaService.test
php arisan make:model Reserva
php arisan make:model Ambiente
<?php
namespace Tests\Unit;
use App\Models\User;
use App\Models\Ambiente;
use App\Models\Reserva;
use App\Services\ReservaService;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Tests\TestCase;
class ReservaServiceTest extends TestCase
{use RefreshDatabase;
public function testReservaAmbiente(): void
{// Arrange: usuário existente
$usuario = new User([
'name' => 'Fulano de tal',
'email' =>'fulano@tal.com',
'password'=> '123',
;
])$usuario->save();
// Arrange: ambiente existente
$ambiente = new Ambiente();
$ambiente->nome = 'Salão de festas';
$ambiente->save();
// Act: criação da reserva
$sut = new ReservaService();
$sut->criar($ambiente, $usuario);
// Assert: existência da reserva no banco de dados
$this->assertDatabaseHas(Reserva::class, [
'id_ambiente'=> $ambiente->id,
'id_usuario'=> $usuario->id
;
])
} }