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 feito uma copia(fork) do projeto que o professor apresentou, está disponível no Github no seguinte link:
https://github.com/pos-unipar/.
Um .zip foi gerado, do projeto no commit 92aaa8d, que é o commit em que estava o projeto na aula de hoje.
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.
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:
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.