Criado por José Lopes
Bem-vindo ao Workshop de WebDev! Este workshop tem como objetivo fornecer as bases necessárias para que qualquer participante possa desenvolver e lançar o seu site pessoal, completamente do zero!
Sexta-feira, dia 13-12-2024 das 17:30h às 20h na sala v0.02.
Se não és membro da HackerSchool, inscreve-te aqui.
Ensinar como fazer uma página pessoal leve, portátil e (esperançosamente) bonita, mais ou menos como esta (ok, seria bonito fosse eu abençoado com ✨graphic design skills✨, tu farás melhor). Durante o WS muitas liberdades serão tomadas e o produto final será algo construído passo a passo, em conjunto. Foca-se maioritariamente em desenvolvimento Frontend. No final, cada participante será capaz de desenvolver a sua página web e lançá-la na plataforma de hosting do Técnico!
Da Wikipedia: “HTML (abreviação para a expressão inglesa HyperText Markup Language, que significa: “Linguagem de Marcação de Hipertexto”) é uma linguagem de marcação utilizada na construção de páginas na Web. Documentos HTML podem ser interpretados por navegadores.”
Principais Características:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- isto é um comentário -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HackerSchool 2024!</title>
<link href="css/style.css" rel="stylesheet">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<!-- Conteúdo da página vai aqui -->
</body>
</html>
Aqui é possível definir a língua, o título da página, importar outros recursos e definir um icon.
<h1>Título Principal</h1>
<h2>Subtítulo</h2>
<h3>Subtítulo Menor</h3>
<p>Parágrafo normal</p>
<strong>Texto em negrito</strong>
<em>Texto em itálico</em>
<a href="https://hackerschool.dev">Link para o site</a>
<img src="imagem.jpg" alt="Descrição da imagem">
<header>Cabeçalho da página</header>
<nav>Menu de navegação</nav>
<main>Conteúdo principal</main>
<footer>Rodapé</footer>
Cascading Style Sheets (CSS) é a linguagem utilizada para ✨tornar bonitos✨ elementos escritos em HTML.
<p style="color: blue; font-size: 16px;">Texto azul</p>
<style> no HTML<style>
p {
color: blue;
font-size: 16px;
}
</style>
/* style.css */
p {
color: blue;
font-size: 16px;
}
/* Por tag */
p { }
/* Por classe */
.texto-azul { }
/* Por ID */
#meu-paragrafo { }
/* Seletor de atributo */
input[type="text"] { }
JavaScript permite adicionar interatividade à página web.
// Exemplo simples
function mudaCor() {
document.body.style.backgroundColor = 'blue';
}
// Adicionar evento a um botão
document.getElementById('meuBotao').addEventListener('click', mudaCor);
Protocolo de transferência de hipertexto, base da comunicação de dados na web. Sei como funciona? Não. Mas tu também não precisas. Só precisas de saber os diferentes tipos de requests:
E que existem códigos de status úteis:
O servidor Sigma pode ser acedido via SSH (Secure Shell) usando o endereço:
istid@sigma.tecnico.ulisboa.pt
Para dar deploy do site é só preciso copiar os ficheiros para o diretório ~/web no servidor.
# Comando básico de deploy, usando rsync para copiar
rsync -avz ./meu-site/ istid@sigma.tecnico.ulisboa.pt:web
# Parâmetros:
# -a: modo arquivo (preserva permissões)
# -v: verbose (mostra detalhes da transferência)
# -z: comprime dados durante a transferência
Instala o FileZilla
Configurações de conexão:
Copia o teu site para o diretório ~/web
Profit
Fantástico! Deténs agora uma poderosa ferramenta de expressão e exploração criativa.
Se quiseres avançar para sites mais complexos talvez penses em explorar frameworks. Sugerimos que dês uma olhada no HUGO, bastante simples mas eficaz, é o que usamos no site da HackerSchool ahahaha.
O mundo espera pelas tuas criações,
Hackers Out