diff --git a/src/consts.ts b/src/consts.ts index 808e3ef..81ee4f9 100644 --- a/src/consts.ts +++ b/src/consts.ts @@ -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', diff --git a/src/layouts/MarkDownLayout.astro b/src/layouts/MarkDownLayout.astro index e7129d9..59eafcd 100644 --- a/src/layouts/MarkDownLayout.astro +++ b/src/layouts/MarkDownLayout.astro @@ -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'; @@ -35,13 +35,11 @@ const classNoteTitles: Record = 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()}`; --- @@ -74,7 +72,7 @@ const githubEditUrl = `${GITHUB_EDIT_URL}/src${file.split('/src').pop()}`;

- 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( diff --git a/src/pages/index.mdx b/src/pages/index.mdx index e42161c..1a25264 100644 --- a/src/pages/index.mdx +++ b/src/pages/index.mdx @@ -3,6 +3,8 @@ layout: ../layouts/MarkDownLayout.astro title: Linguagem de Marcação --- +import { SUBJECT } from '../consts.js' + # {frontmatter.title} @@ -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) => (Turma {github})).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 | + + + + + + + + + + + {SUBJECT.SCHEDULES.map(({ className, day, start, end, room }) => ( + + + + + + + ))} + +
TurmDiaHorárioAmbiente
Turma {className}{day}{start}-{end}{room}
## 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) (padlet); - Avaliação III: [Projeto II](/lm/project); +Estas salas do Google Classroom ({Object.keys(SUBJECT.CLASSROOM_URLS).map((github) => (Turma {github})).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 chat do Google Chat. ## Bibliografia diff --git a/src/pages/project.mdx b/src/pages/project.mdx index 235d167..8e3e3ff 100644 --- a/src/pages/project.mdx +++ b/src/pages/project.mdx @@ -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 projetos deste período, 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! 😊