One post tagged with "24/04/2021"

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;