Projeto ▪️ Proposta ▪️ Tecnologias ▪️ Cronograma das Sprints ▪️ Product Backlog ▪️ Sprints Backlog ▪️ Burndown das sprints ▪️ Detalhes das Sprints ▪️ Equipe
Desenvolver um sistema web para automatizar o processo de catalogar vagas de diversas profissões, principalmente na área de TI.
-
- Página Home
-
- Página de vagas
-
- Página Cursos
-
- Página Institucional
-
- Página para cada vaga
-
- Página Localização
-
- Raspagem das vagas
-
- Raspagem dos cursos
-
- Implementação do Flask
-
- Responsividade
| Front-end | Back-end | Ferramentas |
|---|---|---|
| HTML | JavaScript | Visual Studio Code |
| CSS | Python | Figma |
| Bootstrap | SQL | Git |
| SQLite | Github |
Detalhes
Página Home
Youtube (Qualidade melhor)
Demonstração do layout da página home sendo a mesma dividida em 3 seções.
A seção principal contém a primeira impressão que o site transmitirá para o usuário. Logo, ela tem como meta trasmitir o objetivo do site: que é proporcionar uma busca fácil a oportunidades de emprego assim como acesso a cursos que ofereçam certificações. A segunda seção tem como objetivo direcionar o usuário para a página que contém os cursos oferecidos pelo site. Por fim, a terceira seção da página home, oferece a opção de uma pesquisa por categorias, tornando a busca por vagas de emprego muito mais direta e prática.
Navegação da página home para página vagas via link da barra de navegação
Youtube (Qualidade melhor)
Demonstração do layout da página vagas, assim como o modo de acessá-la.
Primeiramente o usuário é recepcionado na seção principal e ao efetuar o click em "vagas" na barra de navegação, o mesmo é direcionado a página que contém as vagas de emprego.
Navegação da página home para página vagas via botão na seção principal
Youtube (Qualidade melhor)
Demonstração do funcionamento do botão 'Confira as vagas agora mesmo!', localizado na seção principal da página home.
Navegação da página home para página cursos via link da barra de navegação
Youtube (Qualidade melhor)
Demonstração do layout da página de cursos e certificações, assim como o modo de acessa-la.
Primeiramente o usuário é recepcionado na seção principal e ao efetuar o click em "Cursos e certificações" na barra de navegação o mesmo é direcionado a página que contém os respectivos cursos.
Navegação da página home para página cursos via botão na seção principal
Youtube (Qualidade melhor)
Demonstração do funcionamento do botão 'Saiba mais', localizado na seção principal da página home.
Captação de dados (Raspagem)
Youtube (Qualidade melhor)
Demonstração do funcionamento do código que realiza a raspagem de vagas e cursos.
Quando executado, o código retorna um arquivo contendo os dados solicitados em um formato legível e organizado.
Para ver esse código em funcionamento, acesse o link do youtube que se encontra logo acima do GIF
Detalhes
Página Vagas - Paginação e Filtragem de Categorias
Youtube (Qualidade melhor)
Demonstração do layout e funcionamento da página vagas depois de implementado a páginação de seu conteúdo e a filtragem de categorias.
O primeiro Gif mostra a funcionalidade da páginação e o segundo Gif demostra as funcionalidades do botões, que no caso possuem como objetivo apresentar ao usuário vagas especificas da categoria escolhida. Ambas as funcionalidades proporcionam uma experiencia de navegação pelo site muito mais organizada e dinâmica.
Página de cada Vaga
Youtube (Qualidade melhor)
Demonstração do layout e funcionamento da página de cada vaga de emprego.
Ao navegar pela página de vagas de emprego ofertada pelo site, o usuário tem a possibilidade de acessar maiores informações sobre uma vaga escolhida ao clicar sobre a vaga desejada. Ao efetuar o "clique", o usuário é direcionado a uma página especifica de cada vaga.
Página Cursos - Paginação (Raspagem)
Youtube (Qualidade melhor)
Demonstração do layout e funcionamento da página cursos depois de implementado a páginação de seu conteúdo.
Página Métricas
Youtube (Qualidade melhor)
Demonstração do layout e funcionamento da página Métricas.
Ao ser direcionado para a página métricas o usuário encontra um gráfico de pizza que evidencia a quantidade de vagas na área de T.I. ofertas pelo site, assim como a quantidade de vagas em áreas gerais. Ao abrir a sessão "Mais informações sobre vagas", o usuário se depara com um gráfico de barras que transmite a informação de quantas vagas há no site em cada categoria das vagas de T.I. Por fim, na sessão "Mais informações sobre cursos", o usuario encontra as quantidades de cursos existentes em cada categoria oferecida.
Página Institucional
Youtube (Qualidade melhor)
Demonstração do layout e conteúdo da página institucional.
A pagina Institucional busca oferecer para o usuário informações sobre a empresa JobLog.
Página Contato
Youtube (Qualidade melhor)
Demonstração do layout e conteúdo da página contato.
A pagina Contatos busca oferecer para o usuário a possibilidade de entrar em contato com a empresa JobLog.
Detalhes
Página Localização
Youtube (Qualidade melhor)
Demonstração do layout e funcionamento da página localização após sua implementação ao site.
Ao ser direcionado para a página de uma vaga especifica o usuário encontra todas as informações sobre a localização da mesma. Ao efetuar o "clique" sobre a palavra "expandir" o usuario é redirecionado à uma nova pagina onde o mesmo podera ter uma visão maior sobre a aonde a vaga se localiza.
Demonstração do layout e funcionamento da pagina cadastro após transmiti-la de um celular para observar as modificações realizadas pela responsividade.
Demonstração do layout e funcionamento da pagina contato após transmiti-la de um celular para observar as modificações realizadas pela responsividade.
Demonstração do layout e funcionamento da pagina Home após transmiti-la de um celular para observar as modificações realizadas pela responsividade.
Demonstração do layout e funcionamento das paginas Vagas e Localização após transmiti-la de um celular para observar as modificações realizadas pela responsividade.
Demonstração do layout e funcionamento da pagina Login após transmiti-la de um celular para observar as modificações realizadas pela responsividade.
| Nome | Função | Github | Linked-In |
|---|---|---|---|
| Gustavo Marques | Product Owner | Github | Linked-In |
| Camila Redondo | Scrum Master | Github | Linked-In |
| Micael Leal | Desenvolvedor | Github | |
| João Henrique | Desenvolvedor | Github | Linked-In |
| Simone Kanzawa | Desenvolvedor | Github | |
| Henrique Neto | Desenvolvedor | Github | Linked-In |
Detalhes técnicos
Para fins de melhoria de eficiência e praticidade na realização do projeto, deverão, todos os participantes, seguirem os seguintes padrões:
Template mínima no HTML, contendo a barra de navegação e rodapé.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../static/css/template.css">
<title>Cursos e Certificações</title>
</head>
<body>
<!-- Barra de navegação -->
<nav>
<div class="container">
<ul class="navbar-list">
<li id="navbar-logo"><a href="">LOGO</a></li>
<li id="navbar-bar"><span></span></li>
<li class="link"><a href="">Início</a></li>
<li class="link"><a href="">Vagas</a></li>
<li class="link"><a href="">Cursos e Certificações</a></li>
</ul>
</div>
</nav>
<!-- Conteúdo da página deve ser inserido dentro dessa DIV -->
<div class="container">
</div>
<!-- Footer -->
<footer class="footer">
<div class="container">
<ul class="footer-list">
<li id="footer-logo"><a href="">LOGO</a></li>
<li id="footer-bar"><span></span></li>
<li class="link"><a href="">All Rights Reserved</a></li> <!-- B1NAR10S Todos os Direitos Reservados -->
</ul>
</div>
</footer>
</body>
</html>Estilização mínima no CSS. Contém os estilos necessários para funcionamento correto da template do HTML.
@import url('https://fonts.googleapis.com/css2?family=Capriola&display=swap');
:root {
--darker-blue: #00296B;
--dark-blue: #003F88;
--blue: #00509D;
--dark-yellow: #FDC500;
--yellow: #FFD500;
}
* {
margin: 0; padding: 0;
box-sizing: border-box;
font-family: 'Capriola', sans-serif
}
/* Container que alinhará todo o conteúdo da página na mesma orientação */
.container {
width: 90%; height: 100%;
margin: 0 auto;
}
/* Barra de navegação */
nav {
width: 100%; height: 70px;
}
.navbar-list {
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
}
.navbar-list li a {
text-decoration: none;
color: var(--dark-blue);
}
#navbar-logo {
font-size: 2em;
}
#navbar-bar {
width: 50%; height: 2px;
background-color: var(--darker-blue);
}
/* Footer */
.footer{
width: 100%; height: 70px;
bottom: 0;
position: fixed;
text-align: center;
}
.footer-list {
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
}
.footer-list li a {
text-decoration: none;
color: var(--dark-blue);
}
#footer-logo {
font-size: 2em;
}
#footer-bar {
width: 70%; height: 2px;
background-color: var(--darker-blue);
}