15 posts tagged with "2021"

15/05/2021 - Aula 1 de Angular (Presencial)

Professor Geferson fez a apresentação do professor Jean, visto que é a primeira aula que temos com ele. Em seguida foi passado alguns avisos sobre os computadores e acessos.

Logo em seguida o professor perguntou sobre os acadêmicos, para saber o nível de cada um, para saber se todos já tem experiencia com programação. Após o momento de introdução, ele apresenta um pouco sobre si, e damos inicio a aula.

O material que o professor utilizou foi esse aqui em .PDF.

Professor começa a aula falando da parte histórica do Angular, que atualmente esta na versão 12.

O Angular utiliza componentes para sua estrutura, como controle de rotas, servições, etc. Já para a parte de interface, todos os componentes que comecem com ng pertencem ao Angular, dentre eles temos componentes lógicos, como ngIf, ou laços de repetição, como o ngFor.

Começamos com a instalação de alguns programas como o Node.js. O professor recomenda a utilização de um gerenciador de versão do Node, o NVM.

# Verificar vesao do Node
node -v

As 09:30 a aula continuou com a instalação do Angular.

# Verificar do Angular
npm install -g @angular/cli
ng version

As 10:00 a aula continuou com a criação de um novo projeto.

# Verificar do Angular
ng new app-unipar
# ? Would you like to add Angular routing? (y/N) 
n
# ? Which stylesheet format would you like to use? (Use arrow keys)
SCSS

As 10:25 o professor continuou a apresentar a aula, explicando a estrutura do projeto angular recém criado. É aberto o arquivo angular.json e explicado o que significa cada item do arquivo, como onde se coloca novos assets, estilos ou bibliotecas. Depois vimos o arquivo package.json, que contem mais configurações para o projeto. Continuamos vendo outros detalhes, como arquivo de ambientes, o /src/environments, que você coloca configurações para seu ambiente, como ambiente de teste ou ambiente em produção.

Depois de mostrar os arquivos, foi mostrado o componente inicial app-root, como ele está estruturado, onde está o .HTML, o .SCSS e os componentes desse modulo.

Depois de vermos um pouco o projeto, e alteramos o arquivo inicial, vamos começãr a mexer com código. Para isso vamos instalar alguns componentes.

npm i bootstrap --save
npm i @ng-bootstrap/ng-bootstrap --save

Depois de instalar, começamos a utilizar o Bootstrap para formatar um página, mas não terminamos antes do almoço está atividade.

A aula começou a tarde as 13:45, dando continuidade a atividade anterior, que é um TODO, implementamos os metodos de adicionar e remover um TODO.

Professor pediu para gerarmos um novo componente, utilizamos o código abaixo.

ng generate component table-todo

Após criar o componente, migramos de local ele, para aprender a como trabalhar com componentes nossos. Além disso, começamos a utilizar @Input e Output para modificar atributos de dentro de nosso componente, isso tudo até as 16h.

Agora vamos criar um novo componentes para treinarmos a criação de um formulário de cadastro de usuária.

ng generate component form-usuario

As 17:30 terminamos um componente de validação, que ao digitar um campo que não atende aos requisitos, ele apresenta o erro.

24/04/2021 - Aula 3 de HTML5, CSS3 e ES6 (Remoto)

Professor Jemerson ministrou a terceira aula da matéria de HTML5, CSS3 e Javascript, começou fazendo uma revisão sobre a aula anterior e mostrando o que vai ser visto pra aula de hoje. Comentou que hoje vai ter trabalho a ser feito, visto que é a ultima aula dessa matéria.

Continuando a aula anterior, a partir da página 47, professor se aprofundou em Jquery, utilizou o material em .PDF, professor comenta que vamos fazer um exemplo utilizando o formulário feito na aula atividade 2 do qual os itens vão ser salvos numa tabela que vai manipulada pelo DOM, utilizando Jquery.

Foi apresentado métodos de manipulação do DOM, como adicionar ações a elementos, manipular dados do elemento, adicionar novos atributos ou retornar o valor que ele tem e até mesmo manipular informações visuais, como adicionar CSS ou remover CSS.

A aula seguiu assim até umas 10:10, que foi quando foi feito um intervalo.

Voltando do intervalo as 10:30, deu continuidade na aula com uma atividade, para treinar o que foi visto até então. Após um tempo, o professor fez a atividade na aula com todos para explicar uma das possíveis soluções.

Tudo isso foi visto antes do almoço, até as 12:00. A aula voltou as 13:20

A aula continuou falando sobre o ES6 (ECMAScript), falando sobre o escopo que as variáveis tem nessa versão, o let e o var. É recomendado utilizar sempre let, visto que ele só funciona dentro do escopo em que ele esta declarado.

{
    var x = 2;
}
// x pode ser utilizado aqui
{
    let y = 2;
}
// y não pode ser utilizado aqui

var x = 10
// x = 10
{
    var x = 2;
    // x = 2
}
// x = 2

let y = 10
// y = 10
{
    let y = 2;
    // y = 2;
}
// y = 10

Nessa versão também tem o suporte a Arrow Functions, uma forma mais simples de declarar uma função.

// ES5
var x = function(x, y) {
    return x * y;
}

// ES6
const x = (x,y) => x * y;

Podemos trabalhar com listas de forma melhor, utilizando o for/of, ele vai passando elemento por elemento, e salvando em uma variável para utilizar dentro do seu código.

var cars = ["BMW", "Volvo", "Mini"];
var x;

for (x of cars) {
    document.write(x + "<br >");
}

Foi adicionado também o suporte a classes, para trabalhar com orientação a objetos. Promises também foram adicionadas para poder se trabalhar de forma assíncrona. Muitas outras novidades foram adicionadas, a lista completa pode ser vista em https://www.w3schools.com/js/js_es6.asp.

Após falar dos novos recursos, o professor fez um exemplo utilizando map, reduce e filter para mostrar para a turma como que funciona e possíveis utilizações.

Com isso terminamos o material da aula 02 e vamos dar inicio a aula 03.

O material dessa aula está no .PDF, e começamos vendo recursos da API HTML 5, recursos que são chamados, que os navegadores fornecem recursos para nossa aplicação, como a utilização da localização, microfone ou câmera do dispositivo. Uma lista completa pode ser vista aqui.

O Drag/Drop é um desses recursos que a API do HTML 5 fornece, para poder arrastar arquivos para dentro da aplicação. Professor fez um exemplo utilizando a atividade 1, adicionando a opção de mover as noticias para outro local.

O professor comentou que podemos salvar dados no navegador, dentro de um limite que varia de acordo com cada navegador, mas podemos utilizar o Web Storage, tanto para salvar dados, como informações de sessão, a diferença é que os dados de sessão são perdidos quando o navegador é fechado.

O professor também fez um exemplo de armazenamento utilizando local storage e a atividade feita anterior.

AS 16h o professor fez um intervalo de 15 minutos, e após voltar, continuou com a solução do exemplo de local storage.

Após o exemplo, foi falado de acessibilidade, responsividade e de performance dos site, alguns exemplos são:

• https://www.w3.org/Translations/WCAG20-pt-br/
• GTmetrix
• Google PageSpeed Inights
• Google Mobile Friendly
• Responsinator

Além de ferramentas, foi apresentado sites de templates, que ajudam a dar o ponta pé inicial, dentre eles temos:

• https://startbootstrap.com/
• https://coreui.io/
• https://themeforest.net/category/site-templates/admin-templates

Com isso foi finalizado a aula.

Antes de terminar, professor comenta do trabalho, que tem data de entrega dia 08/05/2021. O trabalho tem que atender ao seguintes requisitos:

• Estilizar a página de forma livre utilizando css, sass e/ou Bootstrap; (60%)
• Utilizar HTML5 API Drag/Drop fazendo com que os produtos da seção produtos possa ser movida para seção carrinho. (+20%)
• Utilizar JavaScript (com ou sem JQuery) fazendo com que ao alterar a quantidade dos produtos, a tabela contendo informações de total de tens e valor total sejam atualizadas com os dados correspondentes;

10/04/2021 - Aula 2 de HTML5, CSS3 e ES6 (Remoto)

Professor Jemerson ministrou a segunda aula da matéria de HTML5, CSS3 e Javascript, começou fazendo uma revisão sobre a aula anterior e mostrando o que vai ser visto pra aula de hoje.

Continuou utilizando o material em .PDF, a partir da página 49. Este material pode ter algumas diferenças em relação ao material da aula anterior pois o professor fez alguns ajustes e correções.

A aula continuou o material da primeira aula, na parte de CSS e seus tipos de seletores, classes, elementos, inline, etc.

Professor mandou um link para um repositório no GitHub e utilizando este projeto, o professor foi fazendo durante a aula a estilização do conteúdo com CSS e explicando o que cada alteração iria impactar.

Foi comentado sobre o normalize.css, um projeto que contem formatações CSS para sobrescrever configurações de navegadores, o que pode garantir uma maior compatibilidade com diversos navegadores.

Entrando na parte de fontes, foi apresentado como importamos fontes, que da para trabalhar elas de forma externa ou interna, de que o sistema operacional precisa ter a fonte, caso contrario, uma fonte padrão vai ser utilizada.

• https://www.w3schools.com/css/css_font_google.asp
• https://fonts.google.com/?preview.text_type=custom

Foi falado de outros componentes como Media Queries, Box model, Motores de renderização, tudo isso antes da hora do almoço.

Após o almoço, professor pediu para fazer a atividade da página 84 do .PDF, fazer essa atividade utilizando o projeto que o professor passou, já com as alterações que ele fez durante a aula de hoje, utilizando os arquivos da pasta exemplo.

Depois de um tempo para o pessoal tentar fazer, professor começou a fazer a atividade e explicar cada alteração.

Terminando essa parte da atividade, o professor começa a falar de frameworks front-ent:

• https://purecss.io/
• https://materializecss.com/
• https://get.foundazon/
• https://getbootstrap.com/

Além de ver alguns dos principais front-ends, utilizamos o Bootstrap para modificar a pasta atividade, aplicando a versão 4.6 do framework. Após esse processo, professor fez o envio dessa alteração para o Github.

Com tudo isso, terminamos o material que era da aula 01 do dia 27/03/2021.

Agora vamos começar o conteúdo da aula de hoje utilizando o .PDF, começando vendo sobre SASS.

No conteúdo de SASS, o professor mostra o que é, como fazer a instalação e como trabalhar com ele. Começa apresentando as formas de se criar um arquivo .sass, que podemos trabalhar com variáveis, com alinhamento das propriedades, @Mixin, @extend, @import e Compass.

Em sequencia, é solicitado para instalarmos a extensão Live Sass Compiler no Visual Studio Code. Depois de instalado, foi solicitado para adicionar a seguinte configuração no Visual Studio Code. Vale notar que a extensão comentada tem dois plugins, instale a do link.

"liveSassCompile.settings.formats": [
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "~/../css"
    }
],

Após essas configurações, migramos o .css da pasta exemplo do projeto do professor para ser um .scss e ver como ele se comporta. O plugin vai gerando o arquivo .css conforme vai sendo alterado o .scss.

Terminando esse assunto, entramos em JavaScript, vendo o que é, como utilizar ele na aplicação, como chamar, sua sequencia de chamada, o que pode ser feito, quais elementos consegue manipular, etc.

Além de JavaScript, foi visto JQuery, que é uma biblioteca em javascript para facilitar ações que queira fazer com javascript, como a seleção de elementos, que em javascript seria muito trabalhoso.

Com isso terminamos a segunda aula, conseguindo terminar tudo qeu tinha que ser visto para hoje.

27/03/2021 - Aula 1 de HTML5, CSS3 e ES6 (Remoto)

Professor Jemerson ministrou a primeira matéria do curso, a de HTML5, CSS3 e Javascript. Durante a primeira aula, foi realizado apresentações, tanto do professor como dos alunos. Em seguida o conteúdo começou a ser apresentado utilizando utilizando o material em .PDF.

Após o almoço, iniciou a aula na pratica, professor tinha solicitado para instalar o Visual Studio Code anteriormente e pediu para instalar a seguinte extensão:

• Html Extension Pack
• Open in browser

Começamos dai a ver na pratica as tags HTML e suas funções e em seguida o professor Jemerson passa uma atividade para ser feito.

Após 20 minutos, ele volta e começa a explicar para fazer o upload da atividade para o Github, ele explica como criar um projeto, e os passos iniciais para poder enviar o projeto da nossa maquina para o servidor do github.

Após essa atividade, professor mostrou algumas ferramentas para criar sites, um template que ajuda com recursos e ferramentas:

• Modernizr: É uma pequena biblioteca Javascript que identifica a disponibilidade das novas características do HTML5 e CSS3 nos browsers. https://modernizr.com/
• HTML5 Boilerplate: É um conjunto de arquivos de código aberto, disponível para download que fornecem uma base para criação de qualquer site - https://html5boilerplate.com

Foi apresentado também algumas ferramentas para verificar compatibilidade com html5:

• https://caniuse.com/?search=html5
• https://html5test.com/results/desktop.html
• https://mobilehtml5.org/
• https://gs.statcounter.com/

Seguindo o conteúdo, começamos a ver os tipos de inputs existentes no HTML5

• https://www.w3schools.com/html/html_form_input_types.asp

Professor iniciou também a parte de CSS, comentando o que é, mas não se aprofundou nos seus recursos.

13/03/2021 - Aula introdutória (Presencial/Remoto)

Hoje foi a primeira aula da pós, mas não teve muita coisa. A situação atual é que a pandemia está piorando, e está aumentando o numero de casos de COVID-19 na cidade.

Com isso parte dos alunos não se sentiu confortável para ir no primeiro dia, no qual o professor fez duas reuniões, uma aconteceu presencialmente na Unipar pela manha e no período da tarde teve outra reunião utilizando o Meet.

Essas reuniões foram utilizadas para apresentar informações gerais sobre a pós, matérias, calendário, professores e a situação atual da pandemia, o que fazer caso tiver algum decreto proibindo as aulas.

No geral foi informações do andamento e conhecer alguns dos alunos.