Skip to content

Commit

Permalink
dados da disciplina
Browse files Browse the repository at this point in the history
  • Loading branch information
luizchaves committed Mar 11, 2024
1 parent bf1e2df commit 8a367b9
Show file tree
Hide file tree
Showing 5 changed files with 151 additions and 76 deletions.
32 changes: 31 additions & 1 deletion src/consts.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,36 @@
// subject data
export const SUBJECT = {
CLASSROOM_URLS: {
A: 'https://classroom.google.com/c/NjYzNjMxMjQyMTQz',
B: 'https://classroom.google.com/c/NjY0NDQwNDk2MTcz',
},
CHAT_URL: 'https://mail.google.com/mail/u/0/#chat/space/AAAAujjJnC0',
PROJECTS_URL: 'https://padlet.com/lucachaves/projetolm20241',
GITHUB_URLS: {
A: 'https://github.com/lucachaves/lm-2024-1',
},
SCHEDULES: [
{
className: 'A',
room: 'Lab 58',
day: 'Segunda',
start: '13:00',
end: '14:40',
},
{
className: 'B',
room: 'Lab 4',
day: 'Segunda',
start: '13:00',
end: '14:40',
},
],
};

// project data
export const GITHUB_EDIT_URL = 'https://github.com/ifpb/lm/tree/main';

export const CLASSNOTE_SLUGS = [
export const CONTENT_SLUGS = [
// 'web-server/live-server',
'markup/markup-language',
'html/introduction-html',
Expand Down
12 changes: 5 additions & 7 deletions src/layouts/MarkDownLayout.astro
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import NavBar from '../components/NavBar.astro';
import Sidebar from '../components/Sidebar.astro';
import TableOfContent from '../components/TableOfContent.astro';
import NavigationContent from '../components/NavigationContent.astro';
import { CLASSNOTE_SLUGS, GITHUB_EDIT_URL } from '../consts';
import { CONTENT_SLUGS, GITHUB_EDIT_URL } from '../consts';
import '../styles/global.css';
import '../styles/code.css';
Expand Down Expand Up @@ -35,13 +35,11 @@ const classNoteTitles: Record<string, string> = classroomEntries.reduce(
{}
);
const classNoteIndex = CLASSNOTE_SLUGS.findIndex(
(slug) => slug === currentSlug
);
const classNoteIndex = CONTENT_SLUGS.findIndex((slug) => slug === currentSlug);
const previousClassNote = CLASSNOTE_SLUGS[classNoteIndex - 1];
const previousClassNote = CONTENT_SLUGS[classNoteIndex - 1];
const nextClassNote = CLASSNOTE_SLUGS[classNoteIndex + 1];
const nextClassNote = CONTENT_SLUGS[classNoteIndex + 1];
const githubEditUrl = `${GITHUB_EDIT_URL}/src${file.split('/src').pop()}`;
---
Expand Down Expand Up @@ -74,7 +72,7 @@ const githubEditUrl = `${GITHUB_EDIT_URL}/src${file.split('/src').pop()}`;
</p>

<NavigationContent
hasNavigation={CLASSNOTE_SLUGS.includes(currentSlug)}
hasNavigation={CONTENT_SLUGS.includes(currentSlug)}
previousClassNoteLink={previousClassNote}
nextClassNoteLink={nextClassNote}
previousClassNoteTitle={classNoteTitles[previousClassNote]}
Expand Down
6 changes: 3 additions & 3 deletions src/pages/classnotes.astro
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
import { getCollection } from 'astro:content';
import BaseLayout from '../layouts/BaseLayout.astro';
import { CLASSNOTE_SLUGS } from '../consts';
import { CONTENT_SLUGS } from '../consts';
const classnoteOrder = (classnote: string) =>
CLASSNOTE_SLUGS.indexOf(classnote) + 1;
CONTENT_SLUGS.indexOf(classnote) + 1;
const classroomEntries = await getCollection('classnotes', ({ slug }) =>
CLASSNOTE_SLUGS.includes(slug)
CONTENT_SLUGS.includes(slug)
);
classroomEntries.sort(
Expand Down
34 changes: 28 additions & 6 deletions src/pages/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ layout: ../layouts/MarkDownLayout.astro
title: Linguagem de Marcação
---

import { SUBJECT } from '../consts.js'

# {frontmatter.title}

<img src="/lm/imgs/lm.png" alt="Banner da disciplina" class="hidden md:block" />
Expand Down Expand Up @@ -31,26 +33,46 @@ A disciplina apresenta o seguinte conteúdo, que será dividido conforme este [r
- Animações
- Extensões de CSS

Sobre o código fonte gerados durante as aulas, ele estará disponível no repositório da disciplina ({Object.keys(SUBJECT.GITHUB_URLS).map((github) => (<a href={SUBJECT.GITHUB_URLS[github]} target="_blank">Turma {github}</a>)).reduce((prev, curr) => [prev, ', ', curr])}).

## Horário e ambiente

As aulas da disciplina serão alocados nesse horário e ambiente:

| Dia | Horário | Ambiente |
| ------- | ----------- | ----------- |
| Segunda | 13:00-14:40 | Lab 03 e 58 |
| Quarta | 13:00-14:40 | Lab 03 e 57 |
<table>
<thead>
<tr>
<th>Turm</th>
<th>Dia</th>
<th>Horário</th>
<th>Ambiente</th>
</tr>
</thead>
<tbody>
{SUBJECT.SCHEDULES.map(({ className, day, start, end, room }) => (
<tr>
<td>Turma {className}</td>
<td>{day}</td>
<td>{start}-{end}</td>
<td>{room}</td>
</tr>
))}
</tbody>
</table>

## Avaliações

A nota final será computada através da média ponderada das três maiores avaliações:

- Avaliação I: [Exercícios](https://ifpb.github.io/exercises/);
- Avaliação II: [Projeto I](/lm/project);
- Avaliação II: [Projeto I](/lm/project) (<a href={SUBJECT.PROJECTS_URL} target="_blank">padlet</a>);
- Avaliação III: [Projeto II](/lm/project);

Estas salas do Google Classroom ({Object.keys(SUBJECT.CLASSROOM_URLS).map((github) => (<a href={SUBJECT.GITHUB_URLS[github]} target="_blank">Turma {github}</a>)).reduce((prev, curr) => [prev, ', ', curr])}) serão utilizadas para enviar todas as avaliações.

## Comunicação

Toda a comunicação será realizada usando o Google Chat.
Toda a comunicação será realizada usando este <a href={SUBJECT.CHAT_URL} target="_blank">chat</a> do Google Chat.

## Bibliografia

Expand Down
143 changes: 84 additions & 59 deletions src/pages/project.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,97 +3,122 @@ layout: ../layouts/MarkDownLayout.astro
title: Especificação do Projeto
---

# {frontmatter.title}

## Descrição

A disciplina de Linguagem de Marcação tem como objetivo principal fazer com que os alunos compreendam a utilização de algumas ferramentas Front-end em um sistema Web. Portanto, os alunos deverão aplicar os conhecimentos adquiridos durante a disciplina de Linguagem de Marcação em um projeto e também devem buscar referências externas, além do que foi discutido em sala de aula.
import { SUBJECT } from '../consts.js'

Em relação ao escopo do projeto a escolha do seu tema será livre, ou seja, a definição do domínio de negócio, layout, funcionalidades e navegabilidade serão definidos pelos membros do projeto.
# {frontmatter.title}

A seguir, serão apresentados maiores detalhes do projeto.
A disciplina de Linguagem de Marcação tem como objetivo principal proporcionar aos alunos uma compreensão prática do desenvolvimento Front-end de aplicações Web. Dada a ampla variedade de tópicos na disciplina, não é viável abordar todos os detalhes em exercícios isolados. No entanto, por meio de um projeto, os alunos têm a oportunidade de aplicar os conceitos aprendidos em sala de aula, bem como explorar conteúdos adicionais. O projeto final é, portanto, uma atividade obrigatória para todos os estudantes da disciplina, permitindo a criação de aplicações Web mais sólidas e robustas.

## Apresentação do Tema

Para ajudar na definição do tema central do projeto, que pode ser composto por até **2 (duas) pessoas**, será exigido que cada projeto seja resumidamente apresentado em sala, oralmente, por cada um de seus integrantes, em data a ser definida.

Assim, será exigido que a apresentação possua um tempo máximo de 3 minutos e contemple:
O tema do projeto é livre! Entretanto, você pode se inspirar nos projetos dos outros períodos (consulte [ifpb/projects](https://ifpb.github.io/projects/)), explorar os Padlet dos outros períodos da disciplina ([project-lm-ano-semestre](https://padlet.com/lucachaves/)) ou até mesmo buscar clientes para resolver problemas reais.

* A ideia e objetivo principal do projeto, através de funcionalidades;
* Alguma seleção de telas de sistemas existentes que façam algo semelhante ao que será proposto, ou seja, não precisamos reinventar a roda sempre;
* Por fim, deve-se apresentar alguns esboços de tela de como a equipe enxerga o protótipo final do projeto, pode ser até mesmo [esquemas no papel](https://developers.google.com/web/fundamentals/design-and-ux/ux-basics/), pois o que importa é que fique claro as interações do sistema e sua navegabilidade. Caso necessário, o grupo pode utilizar alguma [ferramenta de prototipagem](https://uxtools.co/tools/prototyping).
No que diz respeito ao escopo do projeto, os membros da equipe serão responsáveis por definir o domínio de negócio, o layout, as funcionalidades e a navegabilidade.

Para facilitar a listagem dos temas, todos os interessados devem declarar suas propostas [neste padlet](https://padlet.com/lucachaves) seguindo esse formato de card:
Para a escolha do tema, sugiro que se formem equipes com no máximo **três integrantes** para a definição inicial do projeto. Após a escolha do tema, todos os projetos devem declarar suas propostas no Padlet dos <a href={SUBJECT.PROJECTS_URL} target="_blank">projetos deste período</a>, seguindo o formato de card a seguir:

```plaintext title="Conteúdo do Card"
```text title="Conteúdo do Card"
Título/Tema do Projeto
Descrição:
Resumidamente descreva a ideia central do seu projeto
Descrição: Resumidamente descreva a ideia central do seu projeto
Equipe:
- Nome do Aluno 1 (matrícula)
- Nome do Aluno 2 (matrícula)
- Nome do Aluno 1 (matricula, github, linkedin)
- Nome do Aluno 2 (matricula, github, linkedin)
- Nome do Aluno 3 (matricula, github, linkedin)
Proposta:
http://link-da-apresentacao-da-proposta
http://link-da-apresentação-da-proposta
Protótipo:
http://link-do-protótipo
Repositório:
http://github.com/link-do-repositorio
```

A declaração de informações no Padlet deve ser realizada por apenas um dos integrantes da equipe, e para possibilitar modificações futuras é necessário possuir uma [conta no padlet](https://padlet.com/).
A declaração de informações no Padlet deve ser feita por apenas um dos integrantes da equipe. Além disso, para permitir modificações futuras, é necessário possuir uma conta no [Padlet](https://padlet.com/referrals/lucachaves). É importante destacar que a ordem de apresentação dos projetos será definida pela sequência dos cards. Portanto, o primeiro card será o primeiro da fila de apresentação.

> Obs: É muito importante que você deixe o card do projeto sempre atualizado com suas informações.
Após a definição do tema, será exigida uma apresentação curta com duração máxima de **3 minutos**, semelhante a um [pitch](https://endeavor.org.br/dinheiro/como-elaborar-um-pitch-quase-perfeito/). Essa apresentação deve abordar os seguintes pontos:

1. Ideia e Objetivo Principal:
- Explique a ideia central do projeto e seus principais objetivos.
- Liste possíveis funcionalidades que serão desenvolvidas.
2. Referências de Sistemas Existentes:
- Apresente telas de sistemas já existentes que realizam algo semelhante ao que seu projeto propõe.
- Lembre-se de que não é necessário reinventar a roda sempre.
3. Esboços da Interface Final:
- Crie esboços de tela que representem como a equipe visualiza a interface final do projeto.
- Use [rabiscos em papel](<(https://developers.google.com/web/fundamentals/design-and-ux/ux-basics/)>) ou [ferramenta de prototipagem](https://uxtools.co/tools/prototyping) gráfica.
- Certifique-se de que as interações do sistema e a navegabilidade estejam claras.

> O Figma é uma excelente ferramenta gratuita para prototipagem. Se desejar ver um exemplo de uso, recomendo conferir o projeto [Conectando estabelecimentos de beleza a clientes durante a quarentena com segurança](https://medium.com/@nativasconcelos/conectando-estabelecimentos-de-beleza-a-clientes-durante-a-quarentena-com-seguran%C3%A7a-ebf0584b1de1).
Para obter mais inspirações vendo projetos dos outros períodos, basta acessar [ifpb/projects](https://ifpb.github.io/projects/) e procurar projetos com a tag `lm-`.

## Requisitos
## Critérios de Avaliação

Nesta seção será apresentada as exigências do projeto que nortearam os critérios da avaliação final.
A definição dos critérios de avaliação será estruturada com base na organização e no uso dos recursos tecnológicos abordados na disciplina. Para simplificar, listarei os critérios de pontuação:

Portanto, para definir os critério de avaliação serão considerados questões de organização e uso de temas abordados na disciplina. Para ser mais pragmático, a seguir, serão listados os critérios de pontuação com as suas devidas proporções:
| Item | Etapa | Requisitos não funcionais |
| ---- | -------- | ------------------------------------- |
| 1 | Etapa I | Criar páginas Web com tags semânticas |
| 2 | Etapa I | Criar páginas Web estilizadas |
| 3 | Etapa I | Criar páginas com Layout |
| 4 | Etapa I | Design Responsivo |
| 5 | Etapa II | Recursos da Web |
| 6 | Etapa II | Formulário |
| 7 | Etapa II | Animação e Transição |
| 8 | Etapa II | Position do CSS |
| 9 | Etapa II | Estilização com Biblioteca CSS |
| 10 | Etapa II | Componente de Biblioteca CSS |

* Organização do código (10%):
- A princípio, os projetos devem ser armazenados no [github](http://github.com/) e no raiz deve apresentar um arquivo `README.md` que deve possuir: a `Descrição do projeto`, os `Requisitos mínimos`, `Inspirações`, `Descrição das funcionalidades` e `Contato`;
- Os arquivos e diretórios devem estar bem organizados;
- E os arquivos devem sempre que possível possuir comentário e boa legibilidade.
* Utilização do conteúdo (90%):
- Estruturar o website utilizando a linguagem de marcação HMTL 5 com tags semânticas.
- Estilização do website com CSS3 (em um ou mais arquivos a parte): tipografia e fontes, alinhamento de decoração dos textos, imagens de fundo, espaçamentos e margens, links.
- Maximizar a utilização de seletores na estilização com CSS: ID, class, cascata e herança, pseudo-classes e pseudo-elementos. *P.S.* Não é necessário utilizar todas as possibilidades, mas tire proveito do que o CSS3 pode lhes oferecer.
- Posicionar os elementos do seu website utilizando conceito de layout em CSS: grid, flexbox,float, position etc.
- Trabalhe imagens com gradientes no seu projeto, anime os elementos do seu website com transition e altere propriedades visuais dos elementos com transform.
- Crie uma área de Contato utilizando formulários.
- Crie um design da página que seja responsivo, para garantir uma visualização confortável nos dispositivos móveis.
- Inclua algum recursos de Serviços disponíveis na Web.
A apresentação desses itens ocorrerá em duas etapas, e a pontuação será distribuída da seguinte forma para a Etapa I (Estilização manual):

| Item | Critérios (%) | Projeto 1 | Projeto 2 | ... | Projeto n |
| ---- | ------------- | --------- | --------- | --- | --------- |
| 1 | 20% | | | | |
| 2 | 20% | | | | |
| 3 | 20% | | | | |
| 4 | 20% | | | | |
| 5 | 20% | | | | |
| | Nota\* | | | | |

Mas, caso você pretenda facilitar o seu checklist de critérios de avaliações versus pontuação, sugiro, que use esta tabela:
E para a Etapa II (Estilização com Biblioteca CSS), a pontuação será distribuída da seguinte forma:

| Critérios (%) | Projeto 1 | Projeto 2 | ... | Projeto n |
| ---------------------- | --------- | --------- | --- | --------- |
| tags semânticas | | | |
| propriedades | | | |
| seletores | | | |
| layout* | | | |
| animation & gradientes | | | |
| contato | | | |
| responsividade | | | |
| recursos da Web | | | |
| Nota** | | | |
| Item | Critérios (%) | Projeto 1 | Projeto 2 | ... | Projeto n |
| ---- | ------------- | --------- | --------- | --- | --------- |
| 6 | 20% | | | | |
| 7 | 20% | | | | |
| 8 | 20% | | | | |
| 9 | 20% | | | | |
| 10 | 20% | | | | |
| | Nota\* | | | | |

*(\*) O layout possuíra peso 2.*
_(\*) A soma de todos os itens será 100, mas também será analisada a organização e o funcionamento geral._

*(\*\*) A soma de todos os itens será 10,0.*
Cada etapa deverá ser apresentada oralmente de forma objetiva em sala por cada integrante do projeto, nas datas definidas pelo cronograma do curso. O projeto deve estar em funcionamento.

Devido a maleabilidade do tema central do projeto, também foi definido que o tema não entraria no critério de avalição dessa atividade, o que de certa forma permitirá que as equipes explorem e desenvolvam suas criatividades.
Para quem deseja dicas de apresentação de projetos, recomendo assistir os Demo Day do Le Wagon (A exemplo deste [Demo Day](https://www.youtube.com/watch?v=nlC1OBVZuOg&list=PLkbmdtbypn7R_BN6nFX-XZc7uDyMSxhye&index=32) em São Paulo). Além disso, uma boa prática é fazer a apresentação do sistema sem abordar detalhes técnicos, mas esteja preparado para responder a perguntas sobre arquiteturais da aplicação.

> Mas, um ponto importante, é que ocorrerão penalizações quando houver falta de usabilidade, de domínio do projeto e de cumprimento no prazo estipulado para apresentação e entrega do projeto. Também vale salientar que sua validade será perdida caso não seja:
>
> * Apresentado na data marcada;
> * Entregue o endereço do repositório contendo todo o código fonte e material exigido.
Em relação ao código, é fundamental que todos os artefatos estejam disponibilizados em um repositório de código aberto, como o GitHub. Certifique-se de que:

## Apresentação Final do Projeto
- Na raiz do repositório, exista um arquivo `README.md` contendo possivelmente:
- `Descrição do projeto`
- `Telas do sistema`
- `Descrição das funcionalidades do projeto`
- `Instruções de instalação`
- `Informações de contato`
- Organize bem os arquivos e diretórios dentro do repositório.
- Adicione comentários aos arquivos sempre que possível para garantir boa legibilidade do código.

O projeto deverá ser entregue no último dia de aula da disciplina através de um projeto no [github](https://github.com/), e cada integrante deverá apresentar individualmente suas implementações no projeto, de tal forma que a nota final será computada seguindo as exigências do projeto.
Além disso, é importante estar ciente das penalizações nos seguintes casos:

- Não seja apresentado na data marcada;
- Não enviar o projeto com o material exigido na data estipulada.
- Ultrapassar o prazo definido para a apresentação.
- Falta de usabilidade do sistema;
- Falta de domínio do projeto.

Por fim, leio com atenção essas diretrizes para garantir o sucesso do seu projeto! 😊

0 comments on commit 8a367b9

Please sign in to comment.