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.
As informações do trabalho estão na pagina da disciplina.
Link
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.
Exemplos
{
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.
Exemplos
// 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.
Exemplos
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.
As informações do trabalho estão na pagina da disciplina.
Link
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;